HTML 캔버스 fillRect() 메서드

❮ HTML 캔버스 참조

예시

채워진 150*100픽셀 직사각형을 그립니다.

브라우저는 HTML5캔버스태그를 지원하지 않습니다.

자바스크립트:

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

브라우저 지원

표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Method
fillRect() Yes 9.0 Yes Yes Yes

정의 및 사용

fillRect() 메서드는 "채워진" 사각형을 그립니다. 채우기의 기본 색상은 검정색입니다.

팁: fillStyle 속성을 사용 하여 그림을 채우는 데 사용되는 색상, 그라디언트 또는 패턴을 설정합니다.

자바스크립트 구문: 컨텍스트 .fillRect( x, y, 너비, 높이 );

매개변수 값

Parameter Description Play it
x The x-coordinate of the upper-left corner of the rectangle
y The y-coordinate of the upper-left corner of the rectangle
width The width of the rectangle, in pixels
height The height of the rectangle, in pixels

❮ HTML 캔버스 참조