HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML canvas rect() 메서드

rect()는 Canvas 2D API가 사각형 경로를 생성하는 방법, 사각형의 시작 위치는 (x, y)이며, 크기는 width와 height입니다. 사각형의4개의 점을 선으로 연결하여, 서브 경로가 닫힌 태그로 사용되기 때문에 사각형을 채우거나 가장자리를 그릴 수 있습니다.

HTML canvas 참조 설명서

온라인 예제

그리기 150*100 픽셀의 사각형：

예제

!DOCTYPE html>
<html>
<head>
<title>HTML canvas rect() 메서드의 사용(기본 튜토리얼 웹 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 태그。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
</script>　
</body>
</html>

시험해 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome 및 Safari가 rect()를 지원합니다. 메서드.

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

정의 및 사용법

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

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

JavaScript 문법：	context.rect(x,y,width,height);

파라미터 값

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

온라인 예제

rect() 메서드를 사용하여 세 개의 사각형을 생성하십시오：

예제

!DOCTYPE html>
<html>
<head>
<title>HTML canvas rect() 메서드의 사용(기본 튜토리얼 웹 oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持 HTML5　canvas 태그。
</canvas>
<script>
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();
</script>　
</body>
</html>

시험해 보세요 ‹/›

HTML canvas 참조 설명서

HTML: <template> 태그