我在HTML5 Canvas上绘制了一些图像，我想检查它们是否在鼠标点击时被击中。看似简单，我有图像的边界，但图像被转换（翻译和缩放）。不幸的是，上下文没有获取当前变换矩阵的方法，而且，没有用于矩阵乘法的API。 似乎唯一的解决方案是自己跟踪变换并实现矩阵乘法。 欢迎提出建议。
答案 0 :(得分：17)
这也是3D（OpenGL）图形世界中的常见问题。
解决方案是创建一个辅助画布对象（不显示），并将图像重绘到其中。绘制与主画布绘制完全相同，只是每个元素都使用唯一颜色绘制。然后，您查找与鼠标选择对应的像素，并读取其颜色，这将为您提供相应的元素（如果有）。
这是OpenGL世界中常用的方法。您可以通过谷歌搜索"opengl object picking"之类的术语找到它的描述。这是one of the many search results。
更新：HTML5画布规范现在包含hit regions。我不确定这些浏览器在多大程度上支持它们。