HTML 캔버스 rect() 메서드
예시
150*100픽셀 직사각형을 그립니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.stroke();
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| rect() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
rect() 메서드는 사각형을 만듭니다.
팁: 실제로 캔버스에 사각형을 그리려면 stroke () 또는 fill() 메서드를 사용하십시오.
| 자바스크립트 구문: | 컨텍스트 .rect( x, y, 너비, 높이 ); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| x | The x-coordinate of the upper-left corner of the rectangle | |
| y | The y-coordinate of the upper-left corner of the rectangle | |
| width | The width of the rectangle, in pixels | |
| height | The height of the rectangle, in pixels |
더 많은 예
예시
rect() 메서드를 사용하여 세 개의 직사각형을 만듭니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Red rectangle
ctx.beginPath();
ctx.lineWidth = "6";
ctx.strokeStyle = "red";
ctx.rect(5, 5, 290, 140);
ctx.stroke();
// Green rectangle
ctx.beginPath();
ctx.lineWidth = "4";
ctx.strokeStyle = "green";
ctx.rect(30, 30, 50, 50);
ctx.stroke();
// Blue rectangle
ctx.beginPath();
ctx.lineWidth = "10";
ctx.strokeStyle = "blue";
ctx.rect(50, 50, 150, 80);
ctx.stroke();
❮ 캔버스 개체