サイト内検索

fill() メソッド

構文

context . fill()

現在の塗りつぶしスタイルで、サブパスを塗りつぶします。

仕様

fill() メソッドは、現在のパスにある各サブパスを fillStyle を使って塗りつぶさなければいけません。塗りつぶす際に、非ゼロ巻数規則を適用します。サブパスが開いている場合は、塗りつぶすときに、暗黙に閉じられなければいけません。(実際のサブパスには影響を与えません。)。

ゆえに、重なり合っているけれども、それぞれ独立したパスが 2 つあるとき、それらが、反対の巻き数を持つなら、それらは打ち消し合うことになり、何も塗りつぶさない結果となります。それらが、同じ巻き数を持つなら、その領域をもう一度描画するだけとなります。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-fill

サンプル

fillメソッドのサンプル

このサンプルでは、lineTo() メソッドを使って三角形のパスを生成し、fill() メソッドを使って、その三角形を塗りつぶしています。

/* 三角形を描く */
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(90, 90);
ctx.lineTo(10, 90);
ctx.closePath();
/* 三角形を塗りつぶす */
ctx.fill();

[fill() メソッドの実際のサンプル]

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 ○ 2 ○ 1 ○ 9.2 ○ 9 ○ 0002 ○
3 ○ 3 ○ 2 ○ 9.5 ○   3 ○
3.5 ○ 4 ○ 3 ○ 10 ○    
3.6 ○ 5 ○ 6 ○ 10.60 ○