使用 HTML5 画布进行不规则图像拖放

Question

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

HTML5 Canvas Animals on the Beach Game with KineticJS

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

Answer 1

一般有两种方式：

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

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