Canvas fillStyle 속성
정의와 사용법
fillStyle 그래픽을 채우기 위한 색상, 그레이드나 패턴을 설정하거나 반환하는 속성.
예제
예제 1
파란색으로 채우는 사각형 정의합니다:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
추천:페이지 하단에 더 많은 예제가 제공됩니다。
문법
context.fillStyle=color|gradient|패턴;
속성 값
| 값 | 설명 |
|---|---|
| color | 그리기 채우기 색상을 지시합니다. CSS 색상 값）。기본 값은 #000000입니다。 |
| gradient | 그리기 채우기에 사용하는 기울기 객체（선형또는원성) |
| 패턴 | 그리기 채우기에 사용하는 패턴 객체. |
기술 세부 사항
| 기본 값: | #000000 |
|---|
更多实例
예제 2
위에서 아래로 기울기 정의하여 사각형 채우기 스타일로 사용하세요:
JavaScript:
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);
예제 3
왼쪽에서 오른쪽으로 기울기 정의하여 사각형 채우기 스타일로 사용하세요:
JavaScript:
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);
예제 4
검은색에서 빨간색으로 흰색으로 변하는 기울기 정의하여 사각형 채우기 스타일로 사용하세요:
JavaScript:
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);
예제 5
사용된 이미지:
이미지를 사용하여 그리기를 채우세요:
JavaScript:
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();
브라우저 지원
표에서의 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 표시합니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
주의:Internet Explorer 8 및 이전 버전은 <canvas> 요소를 지원하지 않습니다.
