HTML 캔버스 rect() 메서드

HTML5 Canvas 참조 가이드

정의와 사용법

rect() 메서드는 사각형을 생성합니다.

추천사용하십시오 stroke() 또는 fill() 메서드는 실제로 캔버스에 사각형을 그립니다.

인스턴스

예제 1

150*100 픽셀의 사각형을 그립니다：

당신의 브라우저는 HTML5 canvas 태그를 지원하지 않습니다.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

직접 시험해 보세요

문법

context.rect(x,y,width,height);

파라미터 값

파라미터 설명
x 사각형의 왼쪽 상단 x 좌표
y 사각형의 왼쪽 상단 y 좌표
width 사각형의 너비(픽셀 단위)
height 사각형의 높이(픽셀 단위)

더 많은 예제

예제 2

rect() 메서드를 사용하여 세 개의 사각형을 생성합니다：

당신의 브라우저는 HTML5 canvas 태그를 지원하지 않습니다.

JavaScript:

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.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();

직접 시험해 보세요

브라우저 지원

표의 숫자는 해당 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

주의사항:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.

HTML5 Canvas 참조 가이드