不规则图像拖动;使用HTML5画布删除

Question

我希望能够在HTML5中编写类似于以下内容的应用程序。

HTML5 Canvas Animals on the Beach Game with KineticJS

该演示的问题是鼠标悬停事件仅对动物周围的矩形是准确的。有没有办法以更准确的方式做到这一点，无论是在KinectJS还是其他方面？

Answer 1

通常有两种方式：

1. 将每个图像的自定义路径用作hitbox（您手动定义），然后使用is-point-in-path算法
2. 使用幽灵画布（或任何你喜欢的名字），如this old tutorial中所述。忽略新教程的链接，旧教程使用您想要的内容。

这里的第一种方法要快得多，但需要更多代码和手动工作。第二种方法是像素完美但速度慢得多。不过，如果你没有大量的物品，它可能会满足你的需求。