예
무승부 150*100 픽셀의 사각형을 :
자바 스크립트 :
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
»그것을 자신을 시도 브라우저 지원
표의 수치는 완전히 방법을 지원하는 제 브라우저 버전을 지정.
| 방법 | |||||
|---|---|---|---|---|---|
| rect() | 예 | 9.0 | 예 | 예 | 예 |
정의 및 사용
rect() 메소드는 사각형을 생성합니다.
팁 : 사용 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();
»그것을 자신을 시도