fillstyle 속성을 사용하는 방법-H5 튜토리얼-php.cn

fillstyle 속성을 사용하는 방법

不言

풀어 주다： 2021-04-20 16:50:54

원래의

5621명이 탐색했습니다.

fillstyle 속성은 그려진 그래픽의 색상을 채우는 것뿐만 아니라 색상 그라데이션을 구현하고 이미지를 채우는 데 사용됩니다. fillstyle 속성의 사용 구문은 "context.fillStyle=color|gradient입니다. |패턴;".

fillstyle 속성을 사용하는 방법

이 문서의 운영 환경: 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>

로그인 후 복사

런닝 효과는 다음과 같습니다

# 🎜🎜#

fillstyle 속성을 사용하는 방법 이 글은 여기에서 끝납니다. 더 흥미로운 내용은 PHP 중국어 웹사이트에서 다른 관련 칼럼 튜토리얼도 보실 수 있습니다! ! !