HTML 캔버스 fillStyle 속성
예시
직사각형의 빨간색 채우기 색상을 정의합니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 150, 100);
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| fillStyle() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
fillStyle 속성은 그림을 채우는 데 사용되는 색상, 그라디언트 또는 패턴을 설정하거나 반환합니다.
| 기본값: | #000000 |
|---|---|
| 자바스크립트 구문: | 컨텍스트 .fillStyle= 색상 | 그라데이션 | 패턴 ; |
속성 값
| Value | Description | Play it |
|---|---|---|
| color | A CSS color value that indicates the fill color of the drawing. Default value is #000000 | |
| gradient | A gradient object (linear or radial) used to fill the drawing | |
| pattern | A pattern object to use to fill the drawing |
더 많은 예
예시
사각형의 채우기 스타일로 그라디언트(위에서 아래로)를 정의합니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
예시
사각형의 채우기 스타일로 그라디언트(왼쪽에서 오른쪽으로)를 정의합니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
예시
사각형의 채우기 스타일로 검은색에서 빨간색, 흰색으로 가는 그라디언트를 정의합니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
사용할 이미지:
예시
이미지를 사용하여 그림 채우기:
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
❮ HTML 캔버스 참조