javascript - 使用HTML5 Canvas 拖放不规则图像

Question

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

HTML5 Canvas Animals on the Beach Game with KineticJS

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

Answer 1

一般有两种方式:

1. 使用每个图像的自定义路径作为命中框(您手动定义)，然后使用 is-point-in-path 算法
2. 使用幽灵 Canvas (或者任何你喜欢的称呼)，正如我在 this old tutorial 中详细介绍的那样。忽略新教程的链接，旧教程使用您想要的内容。

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