canvas无内置碰撞检测，需手动计算几何关系：矩形用aabb法判断x/y轴投影重叠，圆形通过圆心距平方与半径和平方比较。

Canvas 本身不提供内置的碰撞检测功能，需要开发者根据物体的形状和运动逻辑，手动计算几何关系来判断是否相交。核心思路是：**把图形抽象为数学对象（如矩形、圆形、多边形），再用对应几何公式判断重叠**。

矩形与矩形碰撞（AABB）

这是最常用、性能最好的方式，适用于未旋转的轴对齐矩形（例如游戏中的方块、UI 元素）。原理是：两个矩形在 x 和 y 轴上投影都重叠时，才真正相交。

假设矩形 A 的左、右、上、下边界为 leftA、rightA、topA、bottomA，B 同理，则相交条件为：

• leftA
• rightA > leftB
• topA
• bottomA > 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;

圆形与圆形碰撞

适合球体、角色头像、粒子等。只需比较两圆心距离是否小于半径之和。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

设圆 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 或胶囊体近似。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！