예
150 개 * 100 픽셀의 직사각형을 그린다
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
»그것을 자신을 시도 브라우저 지원
테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.
| 방법 | |||||
|---|---|---|---|---|---|
| rect() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
정의 및 사용
rect() 메소드는 사각형을 생성한다.
Tip: 사용 stroke() 또는 fill() 실제로 캔버스에 사각형을 그리는 방법을.
| 자바 스크립트 구문 : | context . rect( x,y,width,height ) ; |
|---|
매개 변수 값
| 매개 변수 | 기술 | 플레이 |
|---|---|---|
| x | 상기 직사각형의 좌측 상단 모서리의 X 좌표 | »플레이 |
| y | 상기 직사각형의 왼쪽 상단의 y 좌표 | »플레이 |
| width | 픽셀 사각형의 너비 | »플레이 |
| height | 사각형의 높이 (픽셀 단위) | »플레이 |
더 예
예
와 세 개의 사각형을 생성 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();
»그것을 자신을 시도 <캔버스 개체