コース推薦:

HTMLキャンバスclosePath()メソッド

定義と使用法 closePath()

ヒント:以下を使用して、キャンバス上に正確なパスを描画します。 メソッドは、現在のポイントから始点へのパスを作成します。 stroke()

ヒント:以下を使用して、キャンバス上に正確なパスを描画します。 fill() 画像を塗りつぶすためのメソッド(デフォルトは黒色です)。以下を使用してください: fillStyle 別の色/グラデーションを塗りつぶす属性

インスタンス

例1

パスを描画し、形式が文字Lであることを確認し、始点に戻る線を描画します:

ブラウザはHTML5キャンバスタグをサポートしていません。

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();

自分で試してみる

ヒント:ページの下部にはさらに多くの例があります。

構文

context.closePath();

さらに多くの例

例2

緑色を塗りつぶし色として設定します:

ブラウザはHTML5キャンバスタグをサポートしていません。

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="green";
ctx.fill();

自分で試してみる

ブラウザサポート

表の数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記:Internet Explorer 8 以前のバージョンは <canvas> 元素をサポートしていません。