HTML5画布测试

我在HTML5画布上绘制了一些图像，我想检查它们是否被鼠标点击。看起来很简单，我有图像的边界，但是图像被转换（平移和缩放）。不幸的是，上下文没有获取当前变换矩阵的方法，而且也没有矩阵乘法的API。 看来唯一的解决办法就是自己跟踪变换并实现矩阵乘法。

---

欢迎提出建议。

这也是3D（OpenGL）图形世界中的常见问题

解决方案是创建一个辅助画布对象（不显示），并将图像重新绘制到其中。绘制与主画布绘制完全相同，只是每个元素都使用唯一的颜色绘制。然后查找与鼠标拾取相对应的像素，并读取其颜色，这将为您提供相应的元素（如果有）

这是OpenGL世界中常用的方法。你可以在谷歌上找到它的描述，比如。这是

---

更新：HTML5画布规范现在包括。我还不确定浏览器在多大程度上支持这些功能。

经过进一步思考后，我意识到，即使上下文有一种方法来获取当前的转换矩阵，它也不会有用，因为我需要鼠标单击图像转换矩阵，而到那时上下文具有不同的转换。我可能需要的是一个场景图，或者实现一个简单的场景图，或者使用像Cake JS这样的库。例如，要平移和缩放鼠标X坐标，请使用newPointX=event.X*scaleX+translateXThanks，您是对的，在这种情况下，我不必实现矩阵乘法。有人开始为画布编写场景图：这里的问题是画布都进行非可选的颜色混合和抗锯齿。当对象彼此邻接时导致颜色之间的差异。这些介于中间的颜色可能与您存储的其他颜色ID非常接近，因此边界区域可能会被错误地表示为对不同对象的点击。我不确定最好的解决办法。对每个可检测对象使用单独的画布会浪费太多内存，在鼠标移动和检查时单独渲染每个对象似乎会浪费太多性能。