>  기사  >  웹 프론트엔드  >  그림을 채우는 데 사용되는 색상 그라데이션이나 패턴을 설정하거나 반환하는 html 속성 fillStyle

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

黄舟
黄舟원래의
2017-11-04 09:24:113074검색

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

그림을 채우는 데 사용되는 색상 그라데이션이나 패턴을 설정하거나 반환하는 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

위에서 아래로의 그라데이션을 직사각형의 채우기 스타일로 정의합니다:

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

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

왼쪽에서 오른쪽으로의 그라데이션을 직사각형의 채우기 스타일로 정의합니다:

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

자바스크립트:

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.