Html5 Canvas方法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）。

如果有很多物體和速度很重要，我通常會做的是使用我自己的點多邊形測試函數或我自己的空間數據結構。

請注意，畫布僅僅是一個位圖，它並不存儲您用來繪製的命令。這就是爲什麼在繪製形狀後無法進行檢查，只能測試當前路徑。

一旦您呼叫beginPath，以前的路徑幾何圖形將被丟棄，如果您調用fill或stroke，則只有受影響的像素具有。

可能對你的情況下，它可能是有意義的檢查畫布像素的顏色...

Answer 2

我剛讀了一個新的除了畫布規範路徑（）對象。推測這些可以被存儲並且隨後被測試和/或重放。可能有用。如果我已經正確理解了這個規範。

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