English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5화면 요소에서 가장 쉽게 그릴 수 있는 형상 중 하나는 사각형입니다. 사용할 수 있습니다2D上下문 fillRect() 함수와 strokeRect()를 사용하여 작업을 수행합니다.
HTML5화면 요소에서 가장 쉽게 그릴 수 있는 형상 중 하나는 사각형입니다. 사용할 수 있습니다2D上下문 fillRect() 함수와 strokeRect()를 사용하여 작업을 수행합니다. 이는 간단한 예제입니다:
<canvas id="ex1" 너비="500" 높이="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>테스트를 해보세요 ‹/›lineWidth를 사용할 수 있습니다2D上下文的 속성을 사용하여 사각형의 선 너비를 설정합니다. 방법은 다음과 같습니다:
<canvas id="ex4" 너비="500" 높이="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex4");
var context = canvas.getContext("2d");
var x = 10;
var y = 10;
var 너비 = 100;
var 높이 = 100;
context.lineWidth = 4;
context.strokeRect(x, y, 너비, 높이);
</script>테스트를 해보세요 ‹/›이는 선 너비가4의 사각형의 외관을 설정할 수 있습니다:
사용할 수 있습니다 2D上下文的fillStyle 또는strokeStyle 속성을 사용하여 사각형의 색상을 설정합니다. 이는 첫 번째 예제로, 이 설정들은 강조 표시되어 표시됩니다:
<canvas id="ex5" 너비="500" 높이="150" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex5");
var context = canvas.getContext("2d");
context.fillStyle = "#ff0000";
context.fillRect(10,10, 100,100);
context.strokeStyle = "#0000ff";
context.strokeRect(30,20, 120,110);
</script>테스트를 해보세요 ‹/›이제 다시 캔버스에 그려진 사각형: