HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML canvas fillRect() 메서드

fillRect()는 Canvas 2D API를 사용하여 렌더링을 수행하는 메서드를 설명합니다. 원형의 시작 위치는 (x, y) 위치이며, 원형의 크기는 width와 height입니다. fillStyle 속성은 원형의 스타일을 결정합니다.

HTML canvas 참조 매뉴얼

온라인 예제

그리기 100*100 화소의 이미填充된 사각형：

예제

<!DOCTYPE　html>
<html>
<head>
<title>HTML　canvas　fillRect()　메서드의 사용(기본 강의 웹　oldtoolbag.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="200"　height="150"　style="border:1px　solid　#d3d3d3>
당신의 브라우저는　HTML5　canvas　표签。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.fillRect(20,20,100,100);
</script>
</body>
</html>

테스트해 보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

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

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

정의 및 사용법

fillRect() 메서드는 '填充' 직사각형을 그립니다. 기본填充 색상은 검정색입니다.

ヒント:사용하십시오: fillStyle 데이터를 그리기 위해 사용되는 색상, 기하학적 변환 또는 패턴을 설정하는 속성을 사용합니다.

JavaScript 문법:	context.fillRect(x,y,width,height);

파라미터 값

파라미터	설명
x	직사각형 왼쪽 상단의 x 좌표.
y	직사각형 왼쪽 상단의 y 좌표.
width	직사각형의 너비, 픽셀로 계산됩니다.
height	직사각형의 높이, 픽셀로 계산됩니다.

HTML canvas 참조 매뉴얼

HTML: <template> 태그