Canvas进阶：碰撞检测的深度解析与实践指南

2025年10月12日 互联网

Canvas进阶：碰撞检测的深度解析与实践指南

在Canvas动态渲染的交互系统中，碰撞检测是构建游戏逻辑、物理模拟和用户交互的核心技术。从简单的矩形碰撞到复杂的像素级检测，开发者需要针对不同场景选择最优方案。本文将系统梳理Canvas碰撞检测的技术体系，提供可落地的实现方案。

一、基础几何碰撞检测

1.1 矩形碰撞检测（AABB）

轴对齐边界框（Axis-Aligned Bounding Box）是最基础的碰撞检测方法，适用于大多数2D场景。其核心原理是通过比较两个矩形的边界坐标判断是否重叠。

  1. function checkAABBCollision(rect1, rect2) {
  2.   return (
  3.     rect1.x < rect2.x + rect2.width &&
  4.     rect1.x + rect1.width > rect2.x &&
  5.     rect1.y < rect2.y + rect2.height &&
  6.     rect1.y + rect1.height > rect2.y
  7.   );
  8. }

优化建议：

  • 提前计算边界值（如rect1.right = rect1.x + rect1.width）减少重复计算
  • 对静态对象建立空间分区（如四叉树）减少检测次数
  • 在游戏循环中采用”宽相检测→窄相检测”的两阶段策略

1.2 圆形碰撞检测

基于距离的圆形碰撞检测适用于粒子系统、弹道轨迹等场景，数学计算更为简洁。

  1. function checkCircleCollision(circle1, circle2) {
  2.   const dx = circle1.x - circle2.x;
  3.   const dy = circle1.y - circle2.y;
  4.   const distance = Math.sqrt(dx * dx + dy * dy);
  5.   return distance < (circle1.radius + circle2.radius);
  6. }

性能优化：

  • 使用距离平方比较避免开方运算
  • 结合空间哈希表进行邻近检测
  • 对高速移动物体采用”甜圈圈”检测（扩大检测半径）

二、多边形碰撞检测

2.1 分离轴定理（SAT）

SAT是处理凸多边形碰撞的通用算法，通过检测所有可能的分离轴来判断碰撞。

  1. function checkSATCollision(polygonA, polygonB) {
  2.   const polygons = [polygonA, polygonB];
  4.   for (let i = 0; i < polygons.length; i++) {
  5.     const polygon = polygons[i];
  6.     const other = polygons[(i + 1) % 2];
  8.     for (let j = 0; j < polygon.edges.length; j++) {
  9.       const edge = polygon.edges[j];
  10.       const normal = { x: -edge.y, y: edge.x }; // 法线
  12.       const minA = findMinProjection(polygon.vertices, normal);
  13.       const maxA = findMaxProjection(polygon.vertices, normal);
  14.       const minB = findMinProjection(other.vertices, normal);
  15.       const maxB = findMaxProjection(other.vertices, normal);
  17.       if (maxA < minB || maxB < minA) return false;
  18.     }
  19.   }
  20.   return true;
  21. }

实现要点：

  • 需预先计算多边形的边向量和法线
  • 支持凹多边形需先分解为凸多边形
  • 结合GJK算法可提升复杂场景性能

2.2 像素级碰撞检测

对于非规则形状，可通过Canvas的getImageData获取像素数据实现精确检测。

  1. function checkPixelCollision(ctx, obj1, obj2) {
  2.   // 创建临时canvas绘制对象
  3.   const tempCtx = document.createElement('canvas').getContext('2d');
  4.   tempCtx.canvas.width = ctx.canvas.width;
  5.   tempCtx.canvas.height = ctx.canvas.height;
  7.   // 绘制对象1（使用特定颜色标识）
  8.   tempCtx.save();
  9.   tempCtx.translate(obj1.x, obj1.y);
  10.   // ...绘制逻辑...
  11.   const data1 = tempCtx.getImageData(0, 0, tempCtx.canvas.width, tempCtx.canvas.height).data;
  13.   // 绘制对象2（使用不同颜色）
  14.   tempCtx.restore();
  15.   tempCtx.save();
  16.   tempCtx.translate(obj2.x, obj2.y);
  17.   // ...绘制逻辑...
  18.   const data2 = tempCtx.getImageData(0, 0, tempCtx.canvas.width, tempCtx.canvas.height).data;
  20.   // 检测重叠区域非透明像素
  21.   // ...检测逻辑...
  22.   return hasOverlappingPixels;
  23. }

性能优化策略：

  • 限制检测区域（只检测边界框重叠部分）
  • 使用颜色编码技术减少数据读取量
  • 对静态背景建立碰撞掩模

三、高级优化技术

3.1 空间分区技术

对于大规模对象，采用空间分区可显著减少检测次数：

  • 四叉树：适用于二维空间均匀分布的对象
  • 网格分区：简单高效，适合对象大小相近的场景
  • BVH（边界体积层次结构）：适合动态对象
  1. class QuadTree {
  2.   constructor(boundary, capacity) {
  3.     this.boundary = boundary; // {x, y, width, height}
  4.     this.capacity = capacity;
  5.     this.points = [];
  6.     this.divided = false;
  7.     // ...子节点...
  8.   }
  10.   insert(point) {
  11.     if (!this.boundary.contains(point)) return false;
  13.     if (this.points.length < this.capacity) {
  14.       this.points.push(point);
  15.       return true;
  16.     } else {
  17.       if (!this.divided) this.subdivide();
  18.       // ...递归插入...
  19.     }
  20.   }
  22.   query(range, found = []) {
  23.     if (!this.boundary.intersects(range)) return found;
  25.     for (const p of this.points) {
  26.       if (range.contains(p)) found.push(p);
  27.     }
  29.     if (this.divided) {
  30.       this.NE.query(range, found);
  31.       // ...查询其他子节点...
  32.     }
  33.     return found;
  34.   }
  35. }

3.2 连续碰撞检测（CCD）

解决高速移动物体的穿透问题，通过预测轨迹进行检测：

  1. function checkContinuousCollision(objA, objB, deltaTime) {
  2.   // 计算相对速度
  3.   const relVel = {
  4.     x: objA.vel.x - objB.vel.x,
  5.     y: objA.vel.y - objB.vel.y
  6.   };
  8.   // 计算最近分离时间
  9.   const t = calculateTimeOfImpact(objA, objB, relVel);
  11.   return t >= 0 && t <= deltaTime;
  12. }

实现方法：

  • Minkowski差法
  • 保守推进算法
  • 特征点追踪

四、实战应用建议

  1. 场景适配策略：

    • 简单游戏：AABB + 圆形检测
    • 物理模拟：SAT + 空间分区
    • 精确交互：像素检测 + 优化

  2. 性能监控： 

    1. function profileCollisionDetection() {
    2.   const start = performance.now();
    3.   // 执行碰撞检测
    4.   const duration = performance.now() - start;
    5.   console.log(`检测耗时: ${duration}ms`);
    6. }

  3. 调试技巧：

    • 使用不同颜色可视化碰撞体
    • 添加检测计数器分析性能瓶颈
    • 实现可调节的检测精度参数

五、未来发展方向

  1. WebGPU加速：利用GPU并行计算提升像素检测性能
  2. 机器学习辅助：通过神经网络预测碰撞概率
  3. 物理引擎集成：结合Matter.js、Box2D等专业物理库

碰撞检测作为Canvas交互的核心技术，其实现方案直接影响系统性能和用户体验。开发者应根据具体场景选择合适的方法，并通过持续优化达到性能与精度的平衡。建议从基础几何检测入手，逐步掌握高级技术，最终构建出高效可靠的碰撞检测系统。

最新文章