我正在尝试在HTML5 / Canvas中构建一些内容，以便在图像上进行跟踪，并在偏离预定义路径时发出警报。
我已经想出了如何将外部图像加载到画布中，并允许在其上绘制mousedown / mousemovement事件来绘制图像，但是我无法理解这一点是比较两者。
图像在白色轮廓上都是简单的黑色，所以从我可以看出，getPixel样式事件可以判断在鼠标所在的位置或下方是否有黑色。
我只用鼠标位置就可以做到这一点，但这需要定义每个图像轮廓的路径（并且有一个公平的数字，因此理想情况下想要通过分析底层图像来实现它）。
我被告知可以使用Flash，但是如果可能的话，我希望避免这种情况，这样可以保持与非Flash平台（即ipad）的兼容性，因为它们是页面运行的主要目标。
任何见解或帮助都将不胜感激！
答案 0 :(得分：1)
我认为你已经触及了解决这个问题的最直接的方法。
如果画布上有黑白图像，您可以将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上下文应该给你足够的灵活性（除非应用程序比看起来更多参与）。