サイト内検索

closePath() メソッド

構文

context . closePath()

現在のサブパスを閉じていると記録し、その閉じたサブパスの開始と終了と同じ地点で、新たなサブパスを開始します。

仕様

closePath() メソッドは、コンテキストにサブパスがなければ何もしてはいけません。コンテキストにサブパスがあれば、最後のサブパスに、閉じられたことが記録され、前のサブパスの始点と同じ地点を始点とする新たなサブパスを生成し、最後に、そのパスに、この新たなサブパスを追加しなければいけません。

最終のサブパスが、その地点リストに 1 つ以上の地点を持つなら、これは、終点を始点に戻って接続する直線を加えることと同じです。そのため、これは、形状を "閉じる"ことになり、最後の（恐らく暗黙の） moveTo() のコールを繰り返すことになります。

それらをつなげる新規の点と線は、後述のメソッドを使ってサブパスに追加されます。すべての場合で、このメソッドは、コンテキストのパスにある最後のサブパスを修正するに過ぎません。

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

サンプル

closePathメソッドのサンプル

このサンプルでは、まず、円弧を描き、開いている部分を closePath() メソッドで閉じています。

ctx.beginPath();
/* 円弧を生成 */
var startAngle = 45 * Math.PI / 180;
var endAngle = 135 * Math.PI / 180;
ctx.arc(100, 100, 45, startAngle, endAngle, true);
/* サブパスを閉じる */
ctx.closePath();
/* これまで描いたパスを表示 */
ctx.stroke();

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

ブラウザ対応状況

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 ○