ホームページ > 記事 > ウェブフロントエンド > fillstyle属性の使い方
fillstyle属性の使い方
- 不言オリジナル
- 2019-02-14 16:55:285562ブラウズ
fillstyle 属性は、描画されたグラフィックスの色を塗りつぶすだけでなく、カラー グラデーションや塗りつぶしイメージを実装するためにも使用されます。fillstyle 属性の使用構文は「context.fillStyle=color|gradient|pattern」です。 ;"。
この記事の動作環境: 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>効果は次のとおりです ##画像を埋める
コードは次のとおりです<!DOCTYPE html>
<html>
<body>
<p>要用到的图片：</p>
<img src="img/mouse.png" id="lamp" / alt="fillstyle属性の使い方" >
<p>Canvas:</p>
<button onclick="draw('repeat')">Repeat</button>
<button onclick="draw('repeat-x')">Repeat-x</button>
<button onclick="draw('repeat-y')">Repeat-y</button>
<button onclick="draw('no-repeat')">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 サイトの他の関連記事を参照してください。