HTML canvas closePath() メソッド

例

L 字のような形のパスを描画した後で、出発点に戻る線を描きます：

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
closePath()	Yes	9.0	Yes	Yes	Yes

定義と用法

closePath() メソッドは、現在のポイントから始点に戻るパスを作成します。

チップ: キャンバスに、実際にパスを描画するためには、stroke() メソッドを使用します。

チップ: 図形を塗りつぶす（デフォルトは黒）ためには、fill() メソッドを使用します。別の色/グラデーションで塗りつぶすには、fillStyle プロパティを使用します。

JavaScript 構文：	context.closePath();

その他の例

例

Use red as the fill color:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fill();

Try it Yourself ❯

HTML Canvas リファレンス