Html5キャンバスメソッドisPointInPathは最後のオブジェクトのみを決定します

Question

例here。

var context=document.getElementById("canvas").getContext("2d"); 

//Red Box 
context.beginPath(); 
context.fillStyle="Red"; 
context.rect(10,10,50,50); 
context.fill(); 

//Pink circle 
context.beginPath(); 
context.lineWidth="3"; 
context.fillStyle="Pink"; 
context.arc(250,250,50,0,Math.PI*2,false); 
context.fill(); 
context.stroke(); 

context.font="1.2em Verdana"; 
context.fillStyle="Black"; 
context.fillText(context.isPointInPath(35,35),35,35); 
context.fillText(context.isPointInPath(250,250),250,250); 

beginPathを指定せずに書き込むと、すべてのオブジェクトが検出されます。 キャンバス上のオブジェクトを特定する方法、またはbeginPathを省略する方法はありますか？

Answer 1

この機能を使用する場合は、テストを実行するたびにパスを再構築する必要があります（fillまたはstrokeを呼び出さないでください）。

多くのオブジェクトがあり、速度が重要な場合は、自分のポイントインポリゴンテスト機能または自分の空間データ構造を使用しています。

キャンバスは単なるビットマップであり、描画に使用するコマンドは保存されません。そのため、シェイプを描いた後にチェックを行うことができず、現在のパスだけをテストすることができます。

fillまたはstrokeを呼び出した場合、beginPathを呼び出すと、前のパスジオメトリは破棄され、影響を受けるピクセルのみが表示されます。

は、キャンバスのピクセルの色をチェックする意味があり、あなたのケースであってよい...

Answer 2

私はちょうどキャンバス仕様に新たに追加がパス（）オブジェクトであることを読みました。おそらくこれらは保存され、その後にテストされ、および/または再生される可能性がある。役に立つかもしれない。私が仕様を正しく理解していれば。あなたの問題を説明する、シンプルでエレガントな、そして適切に切り詰めダウンテストケースのため

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#path-objects