fillstyle属性の使い方-H5 チュートリアル-php.cn

fillstyle属性の使い方

不言

リリース： 2021-04-20 16:50:54

オリジナル

5578 人が閲覧しました

fillstyle 属性は、描画されたグラフィックスの色を塗りつぶすだけでなく、カラーグラデーションや塗りつぶしイメージを実装するためにも使用されます。fillstyle 属性の使用構文は「context.fillStyle=color|gradient|pattern」です。 ;"。

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>

ログイン後にコピー

効果は次のとおりです

fillstyle属性の使い方 ##カラーグラデーション

##コードは次のとおりです

<!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属性の使い方

コードは次のとおりです

<!DOCTYPE html>
<html>
<body>
<p>要用到的图片：</p>
<img  src="img/mouse.png" id="lamp" / alt="fillstyle属性の使い方" >
<p>Canvas:</p>
<button onclick="draw(&#39;repeat&#39;)">Repeat</button> 
<button onclick="draw(&#39;repeat-x&#39;)">Repeat-x</button> 
<button onclick="draw(&#39;repeat-y&#39;)">Repeat-y</button> 
<button onclick="draw(&#39;no-repeat&#39;)">No-repeat</button>     
<canvas id="myCanvas" width="500" height="250" style="border:1px solid #d3d3d3;"></canvas>
<script type="text/javascript">
function draw(direction)
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height); 
var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,direction);
ctx.rect(0,0,300,200);
ctx.fillStyle=pat;
ctx.fill();
}
</script>
</body>
</html>

ログイン後にコピー

実行中の効果は次のとおりです

この記事はここで終わります。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトにある他の関連コラムチュートリアルに注目してください。！！
以上がfillstyle属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。