使用HTML5畫布拖放不規則圖像

Question

我希望能夠在HTML5中編寫類似於以下內容的應用程序。

HTML5 Canvas Animals on the Beach Game with KineticJS

與演示的問題雖然是鼠標事件只精確到周圍動物的矩形。有沒有什麼辦法可以更準確地做到這一點，無論是在KinectJS或其他？

Answer 1

通常有兩種途徑：

1. 使用定製路徑與每個圖像作爲hitboxes（您手動定義）然後使用是點式路徑算法
2. 使用鬼畫布（或者你喜歡稱之爲的任何東西），詳見this old tutorial。忽略新教程的鏈接，舊教程使用你想要的內容。

這裏的第一種方法要快得多，但需要更多的代碼和手動工作。第二種方法是像素完美但速度更慢。不過，如果你沒有大量的物體，它可能會滿足你的需求。