fillstyle 속성을 사용하는 방법
- 不言원래의
- 2019-02-14 16:55:285562검색
fillstyle 속성은 그려진 그래픽의 색상을 채우는 것뿐만 아니라 색상 그라데이션을 구현하고 이미지를 채우는 데 사용됩니다. fillstyle 속성의 사용 구문은 "context.fillStyle=color|gradient입니다. |패턴;".
이 문서의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
html5의 fillstyle 속성을 사용하면 그려진 그래픽의 색상을 채울 수 있을 뿐만 아니라 색상 그라데이션 및 채우기 이미지를 구현할 수 있습니다. 다음 글에서는 의 사용법을 자세히 살펴보겠습니다. fillstyle 속성.
먼저 fillstyle 속성의 기본 사용법을 살펴보겠습니다.
context.fillStyle=color|gradient|pattern;
color는 그림 채우기 색상의 CSS 색상 값을 나타냅니다. 기본값은 검정색입니다.
gradient는 그림을 채우는 그라데이션 개체(선형 또는 방사형)를 나타냅니다.
pattern은 그림을 채우는 패턴 개체를 나타냅니다.
#🎜 🎜# 이렇게 해보자 구체적인 예시 보기채우기 색상
코드는 다음과 같습니다#🎜 🎜#<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="pink";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html># 효과는 다음과 같습니다 효과는 다음과 같습니다 🎜#코드는 다음과 같습니다
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"lightgreen");
my_gradient.addColorStop(1,"yellow");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>런닝 효과는 다음과 같습니다# 🎜🎜#
이 글은 여기에서 끝납니다. 더 흥미로운 내용은 PHP 중국어 웹사이트에서 다른 관련 칼럼 튜토리얼도 보실 수 있습니다! ! !
위 내용은 fillstyle 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!