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

Question

我想知道JavaScript中是否存在等效的方法（對於HTML5支持的瀏覽器），它可以像Flash一樣評估位圖onTitTest hitTest。

此外，如何實現“模糊過濾器”？ 可以將現有的DIV / SPAN標記“繪制”（如Flash的BitmapData.draw（）方法）到位圖對象中，因此它可以用於畫布上的“hitTest”目的嗎？

我想我的HTML行話可能都錯了，但希望這有點道理。

在像素級評估時，是否有任何內置方法可以檢查位圖是否相互接觸？

謝謝！

Answer 1

PlayMyCode對Javascript逐像素碰撞檢測功能有一個很好的逐步解釋，它非常類似於Actionscript的hitTest。

Answer 2

1. 不，HTML Canvas或Context中沒有方法來確定兩個區域是否重疊。 沒有測試非透明像素的非正方形區域重疊，沒有對變換的邊界框重疊的測試，甚至沒有測試重疊的軸對齊邊界框。 任何此類命中測試都需要由您或更高級別的API跟蹤單個位圖來完成。 Canvas / Context是一個非保留的低級像素blitting和繪圖API。

2. 不，您無法將HTML元素的渲染序列化為畫布圖像（除了使用drawImage()復制圖像和/或畫布）。 這包括嘗試捕獲在透明/半透明畫布下繪制的內容。 如果允許，則存在安全問題，因此不存在。

   • 但是，您可以通過使用getImageData()獲取原始像素，然后操縱像素值，然后使用putImageData()將修改后的像素推回到畫布，來“模糊” 已經繪制到畫布的內容。