그림을 채우는 데 사용되는 색상 그라데이션이나 패턴을 설정하거나 반환하는 html 속성 fillStyle

예

파란색으로 채워진 직사각형 정의:

JavaScript:

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!