HTML リファレンスマニュアル

HTML タグ一覧

HTML canvas fill() メソッド

fill() は Canvas 2D API は現在の塗りつぶしスタイルに基づいて、現在または既存のパスを塗りつぶすメソッドです。非ゼロのループまたは奇数偶数ループルールを使用します。

オンラインサンプル

描画 100*100 ピクセルの正方形を描画し、それに赤色で塗りつぶします：

サンプル

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8>
<title>HTML　canvas　fill()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
お使いのブラウザはHTML5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.rect(20,20,100,100);
ctx.fillStyle="red";
ctx.fill();
</script>　
</body>
</html>

テストをしてみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は fill() をサポートしていますメソッド。

注意：Internet Explorer 8 及びそれ以前のバージョンでは <canvas> 要素をサポートしていません。

定義と使用方法

fill() メソッドは現在の図形（経路）を塗りつぶします。デフォルトの色は黒です。

ヒント：使用してください fillStyle 属性を使用して別の色を塗りつぶします/グラデーション。

注意：経路が閉じていない場合、fill() メソッドは経路の終端から始端までの線を追加して経路を閉じます（例えば、 closePath() 同様に）、その経路を塗りつぶします。

JavaScript 语法：	context.fill();

HTML canvas 参考書

HTML: <template> タグ