サイト内検索

beginPath() メソッド

構文

context . beginPath()

現在のパスをリセットします。

仕様

コンテキストには必ず現在のパスがあります。現在のパスは 1 つしかなく、描画状態の一部ではありません。

パスは、0 個以上のサブパスのリストを持ちます。それぞれのサブパスは、1 つ以上の地点のリストから構成され、直線や曲線で接続されます。そして、サブパスが閉じられているか否かを表すフラグから構成されます。閉じられたサブパスとは、サブパスの終点がサブパスの始点に直線で接続されたものです。サブパスに 2 つ以上の地点がないと、パスを描画する際に無視されます。

当初、コンテキストのパスにはサブパスがひとつもありません。

メソッドによってパスに追加された点と線は、それらが追加されるときに、現在の変形マトリックスによって変形されます。

beginPath() メソッドは、サブパスのリストを空にして、コンテキストのサブパスが 0 個となるようにしなければいけません。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#complex-shapes-paths

サンプル

beginPathメソッドのサンプル

このサンプルでは、まず、三角形を描くサブパスを2つ作り、それらを描画します。その後、beginPath() メソッドでパスを初期化し、今度は直線を描くサブパスをひとつ作り、それを描画します。

/* -------------------------------------
* パスを新たに作る
* ----------------------------------- */
/* パスを初期化 */
ctx.beginPath();
/* 一つめのサブパス */
ctx.moveTo(30, 10);
ctx.lineTo(45, 50);
ctx.lineTo( 5, 50);
ctx.closePath();
/* 二つ目のサブパス */
ctx.moveTo(70, 10);
ctx.lineTo(95, 50);
ctx.lineTo(55, 50);
ctx.closePath();
/* これまで描いたパスを表示 */
ctx.stroke();
/* -------------------------------------
* パスを新たに作る
* ----------------------------------- */
/* パスを初期化 */
ctx.beginPath();
/* 一つめのサブパス */
ctx.moveTo(30, 80);
ctx.lineTo(70, 80);
/* これまで描いたパスを表示 */
ctx.stroke();

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

ブラウザ対応状況

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 ○