HTML Canvas 사각형
예제
150*100 픽셀의 사각형을 그립니다:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
rect() 메서드
rect() 메서드는 경로에 사각형을 추가합니다.
문법:
context.rect(x, y, width, height)
| 파라미터 | 설명 |
|---|---|
| x | 사각형의 왼쪽 상단 x 좌표 |
| y | 사각형의 왼쪽 상단 y 좌표 |
| width | 사각형의 너비(픽셀 단위) |
| height | 사각형의 높이(픽셀 단위) |
더 많은 예제
예제
사각형을 생성하는 rect() 메서드를 사용합니다:
JavaScript:
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 레드 사각형
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// 그린 사각형
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// 블루 사각형
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();
