在HTML5 JavaScript中等效Flash的BitmapData.hitTest（）

Question

我想知道JavaScript中是否存在等效的方法（对于HTML5支持的浏览器），可以像Flash一样评估位图匹配的hitTest。

此外，如何实现“模糊过滤器”？ 可以将现有的DIV / SPAN标记“绘制”（如Flash的BitmapData.draw（）方法）到位图对象中，因此它可以用于画布上的“hitTest”目的吗？

我想我的HTML行话可能有错误，但希望这有点道理。

在像素级评估时，是否有任何内置方法可以检查位图是否相互接触？

谢谢！

Answer 1

1. 不，HTML Canvas或Context中没有方法来确定两个区域是否重叠。没有测试非透明像素的非正方形区域重叠，没有对变换的边界框重叠的测试，甚至没有测试重叠的轴对齐边界框。任何此类命中测试都需要由您或更高级别的API跟踪单个位图来完成。 Canvas / Context是非保留低级像素blitting和绘图API。

2. 不，您无法将HTML元素的呈现序列化为画布图像（使用drawImage()复制图像和/或画布除外）。这包括尝试捕获在透明/半透明画布下绘制的内容。如果允许，则存在安全问题，因此不存在。

   • 但是，您可以使用getImageData()“获取”原始像素，然后操纵像素值，然后使用putImageData()，将已经绘制的内容“模糊”到画布<模糊将修改后的像素推回画布。

Answer 2

PlayMyCode对Javascript per-pixel collision detection function的逐步解释非常类似于Actionscript的hitTest。