HTML5畫布isPointInPath（）方法

作爲漏斗圖的一部分，我在畫布上繪製了平行四邊形圖。爲了便於點擊平行四邊形（即漏斗的部分），我正在存儲座標並對鼠標座標進行檢查以查看鼠標是否位於正確的區域。這工作得很好，很棒。HTML5畫布isPointInPath（）方法

但是現在我遇到了.isPointInPath（）方法（它只需要四年）。所以我想知道它是否會更快（使用這些座標會更容易些）：

1）重放路徑而不用撫摸或填充它使其不可見 2）檢查鼠標座標使用此.isPointInPath（）方法

發生點擊時和檢查開始可能有多個節段，以檢查 - 例如5

2012-08-27 Richard

一般取決於衝程或將圖的填充鼠標檢測座標應改變（從像素完美檢測的角度來看），所以當重新繪製平行四邊形時，應儘可能精確。

有了這個說法，通常最好的方法是在離屏畫布上做這個操作。您可以使用輔助畫布逐個重新繪製您的平行四邊形，並根據您所說的使用isPointInPath()來檢查您的狀況。但是，您必須非常小心地使用此方法，因爲如果點位於畫布的當前默認路徑中，並且取決於您如何繪製數字，它可能不會始終符合您的期望：

另一種解決方案是逐個繪製數字，並使用getImageData()來檢測鼠標座標中是否有顏色，這意味着在圖形上會有點擊。你可以看到一個例子here

希望這有助於

2012-08-27 09:39:16 jbalsas

它做 - 我已經看到了HTML5的岩石「改善你的畫布速度」一文（IIRC）前面提到的二次帆布的做法 - 將這個提議的任何速度通過屏幕畫布上的形狀而不是撫摸它（所以它不會畫在屏幕上）？ – Richard

它可能會因爲它甚至不需要渲染。然而，對我來說，在你的案例中使用輔助畫布的主要原因是你不要用不真正意味着不可見的操作搞亂畫布。另外，如果我沒有記錯，那麼你所指的文章會在實際渲染之前使用其他畫布進行預渲染（做一些計算），所以我會說用例略有不同。 – jbalsas

謝謝。縱觀帆布規格，即將出現的道路可能會使這個問題變得不切實際。 – Richard

回答