我正在尝试在 HTML5/Canvas 中构建一些东西，以允许跟踪图像并在偏离预定义路径时发出警报。
我已经弄清楚如何将外部图像加载到画布中，并允许其上的 mousedown/mousemovement 事件在图像上绘制，但我无法理解的是比较两者。
图像都是简单的黑底白轮廓，因此我可以通过 getPixel 样式事件判断在绘制的位置下方或鼠标所在位置下方是否有黑色。
我可以只使用鼠标位置来完成，但这需要定义每个图像轮廓的路径（并且有相当数量，因此理想情况下希望通过分析底层图像来完成）..
有人告诉我，它可以使用 Flash，但我希望尽可能避免这种情况，以便可以保持与非 Flash 平台（即 ipad）的兼容性，因为它们是页面运行的主要目标。
任何见解或帮助将不胜感激！
【问题讨论】：
标签： javascript html canvas
我认为您已经提到了解决此问题的最直接的方法。
给定画布上的黑白图像，您可以将mousemove 事件处理程序附加到元素以跟踪光标的位置。如果用户按住left-mouse，您想确定他们当前是否正在跟踪预定义的路径。为了让用户不那么烦人，我会通过采样一个小像素窗口来解决这部分问题。 9x9 pixels 周围的东西可能是一个不错的尺寸。请注意，您希望窗口大小在两个维度上都为 odd，以便在两个方向上进行对称采样。
使用光标的位置，在画布上调用getImageData()。您的函数调用看起来像这样：getImageData(center_x - Math.floor(window_size / 2), center_y - Math.floor(window_size / 2), window_size, window_size)，这样您就可以得到一个像素的示例窗口，其中心位于光标的正上方。从那里，您可以进行简单的检查以查看窗口内是否有任何非白色像素，或者您可以更严格并要求一定数量的非白色像素来声明路径上的用户。
我认为，使这项工作顺利进行的关键是确保用户在偏离路径的最微小位置时不会收到负面反馈（除非那是您想要的）。到那时，您就有可能让用户感到恼火和沮丧。
最终归结为两种方法之一。要么加载应用程序的实际矢量路径以比较用户的光标（即进行point-in-path 检查），要么从图像中采样像素数据。如果您不需要 point-in-path 检查的完美准确性，我认为像素采样应该可以正常工作。
编辑：我刚刚重新阅读了您的问题并意识到，根据您对getPixel() 的引用，您可能正在为此使用 WebGL。 WebGL 的方法是相同的，除了您当然会使用不同的功能。但是，我认为您不需要 WebGL，因为 2D 上下文应该为您提供足够的灵活性（除非应用程序比看起来更复杂）。
【讨论】：