javascript - HTML5 JavaScript 中 Flash 的 BitmapData.hitTest() 的等价物

Question

我想知道 JavaScript 中是否存在现有的等效方法(对于支持 HTML5 的浏览器)可以像 Flash 一样评估位图对位图 hitTest。

此外，如何实现“模糊滤镜”？是否可以将现有的 DIV/SPAN 标记“绘制”(如 Flash 的 BitmapData.draw() 方法)到位图对象中，以便在 Canvas 上用于“hitTest”目的？

我想我可能在这里完全弄错了 HTML5 行话，但希望这有点道理。

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

谢谢!

Answer 1

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

2. 不可以，您不能将 HTML 元素的渲染序列化为 Canvas 图像(除了使用 drawImage() 复制图像和/或 Canvas )。这包括 try catch 在透明/半透明 Canvas 下绘制的内容。如果允许，则存在安全问题，因此不允许。

   • 但是，您可以通过使用 getImageData() 获取原始像素，然后处理像素值，然后使用putImageData() 将修改后的像素推回 Canvas 。