Canvas像素级碰撞检测的底层原理是通过读取重叠区域内的实际RGBA像素数据，以alpha通道值是否均大于阈值来判定不透明像素交叠。核心依赖getImageData()获取Uint8ClampedArray格式的像素数组，按行优先存储每像素RGBA四字节，alpha位于索引n*4+3；需先计算AABB交集确定重叠矩形，再映射到两图像局部坐标系分别提取对应像素alpha值比对，任一匹配即返回true。
Canvas像素级碰撞检测的底层原理，是通过读取两个图像在重叠区域内的实际像素数据，逐点判断是否存在不透明像素的交叠。它不依赖形状或边界框，而是直接操作ImageData中的RGBA值，以alpha通道（透明度）为关键判定依据。
核心依赖：getImageData() 与像素数据结构
Canvas提供context.getImageData(x, y, width, height)方法，返回一个ImageData对象，其.data属性是一个一维Uint8ClampedArray，按行优先顺序存储每像素的RGBA四字节值（0–255）。例如，第n个像素的alpha值位于索引n * 4 + 3处。
要进行像素检测，需先确保两图像已绘制到同一canvas（或分别绘制后读取），再计算它们的重叠矩形区域（即AABB交集），最后仅对该区域内对应位置的像素做比对。
重叠区域定位与坐标映射
假设图像A左上角为(ax, ay)、尺寸(aw, ah)，图像B为(bx, by)、(bw, bh)，则重叠矩形为：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- left = max(ax, bx)
- top = max(ay, by)
- right = min(ax + aw, bx + bw)
- bottom = min(ay + ah, by + bh)
若left < right且top < bottom，说明存在重叠。此时需将该区域映射到两张图像各自的局部坐标系中，确定各自getImageData()应读取的子区域起始点和宽高，避免读取整图造成性能浪费。
逐像素透明度比对逻辑
对重叠区域内的每个像素位置(x, y)：
- 计算其在图像A的局部坐标：
ax_local = x - ax，ay_local = y - ay - 计算其在图像B的局部坐标：
bx_local = x - bx，by_local = y - by - 分别从A、B的
ImageData.data中提取对应像素的alpha值（索引分别为(ay_local * aw + ax_local) * 4 + 3和(by_local * bw + bx_local) * 4 + 3） - 若两者alpha均 > 0（通常设阈值如32，避免抗锯齿导致的半透误判），即判定为一次有效像素碰撞
一旦发现任一匹配，即可提前返回true；遍历完无匹配则返回false。
性能与实践注意事项
该方法精度高但开销大，实际使用需权衡：
- 务必先用AABB或圆形粗筛，剔除明显不相交的对象，避免进入像素级流程
- 图像应预处理为无抗锯齿、边缘硬朗的位图；若含渐变或模糊，需提高alpha阈值或预合成到离屏canvas统一格式
- 避免每帧重复调用
getImageData()——可将静态素材的像素数据缓存为TypedArray，运行时只读取动态对象部分 - Web Workers中无法直接访问canvas，故像素检测逻辑不可直接移入Worker；但可将
ImageData.data数组传入Worker做纯计算，再回传结果
本质上，它把碰撞问题还原为二维布尔矩阵的按位与运算，只是由JS在CPU上显式执行，而非GPU加速的图形管线内置操作。
