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

HTML5 Canvas 参考手册

定義と使用方法

beginPath() メソッドは新しいパスを開始したり、現在のパスをリセットします。

ヒント：次のメソッドを使用してパスを作成してください：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo()、およびarc()。

ヒント：次を使用してください stroke() キャンバス上に正確なパスを描画するメソッド。

インスタンス

キャンバス上に2つのパスを描画；赤色と青色：

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // 紅色のパス
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 描画を行います
ctx.beginPath();
ctx.strokeStyle="blue"; // 蓝色のパス
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 描画を行います

実際に試してみてください

文法

context.beginPath();

ブラウザのサポート

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

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

注記：Internet Explorer 8 およびそれ以前のバージョンでは <canvas> 要素がサポートされていません。

HTML5 Canvas 参考手册