Canvas无内置碰撞检测，需手动计算几何关系：矩形用AABB法判断x/y轴投影重叠，圆形通过圆心距平方与半径和平方比较。
Canvas 本身不提供内置的碰撞检测功能，需要开发者根据物体的形状和运动逻辑，手动计算几何关系来判断是否相交。核心思路是：**把图形抽象为数学对象（如矩形、圆形、多边形），再用对应几何公式判断重叠**。
矩形与矩形碰撞（AABB）
这是最常用、性能最好的方式，适用于未旋转的轴对齐矩形（例如游戏中的方块、UI 元素）。原理是：两个矩形在 x 和 y 轴上投影都重叠时，才真正相交。
假设矩形 A 的左、右、上、下边界为 leftA、rightA、topA、bottomA，B 同理，则相交条件为：
leftArightA > leftBtopAbottomA > topB
实际中常通过 x、y、width、height 计算边界，例如：const leftA = rectA.x;const rightA = rectA.x + rectA.width;const topA = rectA.y;const bottomA = rectA.y + rectA.height;
立即学习“前端免费学习笔记（深入）”；
圆形与圆形碰撞
适合球体、角色头像、粒子等。只需比较两圆心距离是否小于半径之和。
设圆 A 圆心 (ax, ay)、半径 ar，圆 B 为 (bx, by)、br，则：
- 先算平方距离避免开方：
dx = ax - bx; dy = ay - by; distSq = dx*dx + dy*dy; - 再判断：
distSq
用平方距离能显著提升性能，尤其在高频检测场景（如每帧多个对象）。
矩形与圆形碰撞
常见于主角（圆形）触碰平台或障碍（矩形）。关键思路是：找矩形上离圆心最近的点，再测该点到圆心的距离是否 ≤ 半径。
- 将圆心
(cx, cy)“夹”到矩形范围内：closestX = Math.max(rect.x, Math.min(cx, rect.x + rect.width));closestY = Math.max(rect.y, Math.min(cy, rect.y + rect.height)); - 计算该点到圆心的平方距离：
dx = cx - closestX; dy = cy - closestY; distSq = dx*dx + dy*dy; - 判断：
distSq
更复杂形状（多边形/像素级）
若需高精度（如旋转矩形、不规则角色），可升级方法：
- 分离轴定理（SAT）：适用于凸多边形。检查是否存在一条直线，能让两个多边形投影完全分离；若所有轴都重叠，则相交。实现较复杂，但通用性强。
-
像素级碰撞：将两个物体渲染到离屏 canvas，读取重叠区域的像素数据（
ctx.getImageData()），看是否有非透明像素同时存在。准确但性能差，仅用于关键判定（如攻击命中）。 - 简化包围盒：对复杂图形，先用 AABB 或圆形做粗筛，再对“可能相交”的对象用精确算法细判，兼顾效率与精度。
实际项目中，90% 的需求用矩形-矩形或圆形-圆形就足够。关键是根据物体行为选择合适抽象——不动的墙用 AABB，滚动的球用圆形，带方向的角色可用带旋转的 AABB 或胶囊体近似。
