HTML リファレンスマニュアル

HTMLタグ一覧

HTML canvas beginPath()メソッド

beginPath()はCanvas 2D APIは、子経路リストをクリアして新しい経路を開始する方法です。新しい経路を作成したいときに、このメソッドを呼び出します。

オンラインサンプル

在画布上两条路径を描画；緑色と紫色：

サンプル

<!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　canvas　beginPath()メソッドの使用-基本チュートリアル(w3(codebox.com)</<title>
</<head>
<body>
<canvas　id="myCanvas"　width="300"　height="150"　style="border:1px　solid　#d3d3d3>
あなたのブラウザはHTML5　canvas　タグ。
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();　　　　　　　　　　　　　　
ctx.lineWidth="5";
ctx.strokeStyle="green";　　//　緑色経路
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke();　　//　描画　
ctx.beginPath();
ctx.strokeStyle="purple";　　//　紫色的経路
ctx.moveTo(50,0);
ctx.lineTo(150,130);　　　　　　　　　　　　
ctx.stroke();　　//　描画
</script>
</body>
</html>

テストをしてみる ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome そして Safari は beginPath() をサポートしています。メソッド。

注意：Internet Explorer 8 及びそれ以前のバージョンでは <canvas> 元素をサポートしていません。

定義と使用法

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

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

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

JavaScript 文法：	context.beginPath();

HTML canvas 参考マニュアル

HTML: <template> タグ