像素级碰撞检测是高精度兜底方案，需先用AABB粗筛再对重叠区域逐像素比对Alpha值，性能开销大，须控制频率、范围并适配兼容性。
像素级碰撞检测适合需要高精度判定的场景，比如角色踩中特定地形、子弹击中敌人非矩形轮廓、或不规则道具拾取。它不是首选方案，但一旦几何检测不够用，它就是最可靠的兜底手段。
先做边界框粗筛，再进像素细判
直接对整张图做像素比对太慢。必须先用 AABB（矩形包围盒）快速排除明显不相交的对象——只有当两个对象的矩形区域重叠时，才启动像素检测。
- 计算两对象矩形边界的重叠区域：
left = Math.max(a.x, b.x)，right = Math.min(a.x + a.width, b.x + b.width)，同理算出top和bottom - 若
right ，说明无重叠，直接返回 false - 否则，这个
width = right - left、height = bottom - top的区域，才是后续要逐像素检查的范围
用离屏 Canvas 渲染并提取像素数据
不能直接从主画布读取——它可能含背景、UI 或其他无关图层。正确做法是：为每个待检对象单独绘制到一个干净的离屏 canvas 上，再用 getImageData() 提取纯 Alpha 通道信息。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 创建离屏 canvas：
const offscreen = document.createElement('canvas');，设好宽高（建议按对象原始尺寸） - 用
offscreen.getContext('2d')绘制对象（注意：只绘形状，不加阴影、渐变等干扰透明度的效果） - 调用
ctx.getImageData(0, 0, width, height)获取data数组，每 4 个值为一组（R,G,B,A），只看第 4 个（Alpha）是否 > 0 - 关键点：两个对象的像素数据需统一映射到同一坐标系下（例如都以重叠区域左上角为原点）
逐像素比对透明度，发现重叠即终止
不是比颜色，而是比“是否都不透明”。只要在重叠区域内，存在某个坐标 (x,y)，使得对象 A 在该点的 Alpha > 0，且对象 B 在对应偏移位置的 Alpha > 0，就判定为碰撞。
- 遍历重叠区域的每个像素：
for (let y = 0; y - A 的像素索引：
const idxA = (y * aCanvasWidth + x) * 4 + 3；B 的像素索引需按相对偏移换算（如 B 相对于重叠区左上角偏移了dx, dy，则索引为((y - dy) * bCanvasWidth + (x - dx)) * 4 + 3） - 只要
dataA[idxA] > 0 && dataB[idxB] > 0成立一次，立刻返回 true，不必扫完全部
性能和兼容性注意事项
像素检测开销大，务必控制使用频率和范围。实际项目中常配合降采样、跳帧检测或仅对关键对象启用。
- 避免在每一帧都对所有对象两两做像素检测；可标记“正在攻击”“受击中”等状态，只对这些对象启用
- 离屏 canvas 尺寸不宜过大，否则
getImageData()分配内存慢，甚至触发浏览器限制 - 部分低端设备或旧版 WebView 对
getImageData()支持不稳定，上线前需真机验证 - 若对象有缩放/旋转，不要直接用渲染后的图像——应基于原始矢量路径或预烘焙的掩码图做检测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
