예
파란색으로 채워진 직사각형 정의:
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#0000ff"; ctx.fillRect(20,20,150,100);
브라우저 지원
Internet Explorer 9, Firefox, Opera, Chrome 및 Safari는 fillStyle property을 지원합니다.
참고: Internet Explorer 8 이하에서는
정의 및 사용법
fillStyle 속성은 그림을 채우는 데 사용되는 색상, 그라데이션 또는 패턴을 설정하거나 반환합니다.
기본값: | #000000 |
JavaScript 구문: | context.fillStyle=color|gradient|pattern; |
속성 값
값 | 설명 |
color | 도면 채우기 색상을 나타내는 CSS 색상 값입니다. 기본값은 #000000 |
gradient | Gradientobject(선형 또는 방사형)입니다 |
pattern | 그림을 채울 패턴 객체 |
더 많은 예
예시 1
위에서 아래로의 그라데이션을 직사각형의 채우기 스타일로 정의합니다:
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);
예 2
왼쪽에서 오른쪽으로의 그라데이션을 직사각형의 채우기 스타일로 정의합니다:
자바스크립트:
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);
위 내용은 그림을 채우는 데 사용되는 색상 그라데이션이나 패턴을 설정하거나 반환하는 html 속성 fillStyle의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!