HTML5动画中的碰撞检测指的是判断两个或多个运动元素是否发生接触，进而触发对应的交互逻辑，比如游戏中的角色碰撞、弹球反弹等效果都需要依赖碰撞检测实现。常见的碰撞检测方式分为矩形碰撞和圆形碰撞，开发者可以根据动画元素的形状选择合适的检测方案。
碰撞检测基础原理
碰撞检测的核心是通过计算两个元素的位置和尺寸关系，判断是否存在重叠区域。在HTML5的Canvas动画中，我们通常会记录每个动画元素的x、y坐标，以及宽度、高度（矩形元素）或半径（圆形元素），通过数学公式判断两个元素是否满足碰撞条件。
矩形碰撞检测逻辑
矩形碰撞的判断规则是：两个矩形在x轴和y轴上的投影都存在重叠时，才判定为发生碰撞。具体判断条件如下：
- 矩形A的右边界大于矩形B的左边界
- 矩形A的左边界小于矩形B的右边界
- 矩形A的下边界大于矩形B的上边界
- 矩形A的上边界小于矩形B的下边界
对应的代码实现如下：
/**
* 矩形碰撞检测函数
* @param {Object} rect1 矩形1，包含x,y,width,height属性
* @param {Object} rect2 矩形2，包含x,y,width,height属性
* @returns {boolean} 是否发生碰撞
*/
function checkRectCollision(rect1, rect2) {
// 判断x轴方向是否重叠
const xOverlap = rect1.x + rect1.width > rect2.x && rect1.x < rect2.x + rect2.width;
// 判断y轴方向是否重叠
const yOverlap = rect1.y + rect1.height > rect2.y && rect1.y < rect2.y + rect2.height;
// 两个方向都重叠则发生碰撞
return xOverlap && yOverlap;
}
圆形碰撞检测逻辑
圆形碰撞的判断规则是：两个圆形圆心之间的距离小于两个圆形半径之和时，判定为发生碰撞。我们可以通过勾股定理计算圆心距离：
/**
* 圆形碰撞检测函数
* @param {Object} circle1 圆形1，包含x,y,radius属性
* @param {Object} circle2 圆形2，包含x,y,radius属性
* @returns {boolean} 是否发生碰撞
*/
function checkCircleCollision(circle1, circle2) {
// 计算两个圆心x轴距离
const dx = circle1.x - circle2.x;
// 计算两个圆心y轴距离
const dy = circle1.y - circle2.y;
// 计算圆心距离的平方
const distanceSquare = dx * dx + dy * dy;
// 计算半径之和的平方
const radiusSumSquare = (circle1.radius + circle2.radius) * (circle1.radius + circle2.radius);
// 距离平方小于半径平方和则发生碰撞
return distanceSquare < radiusSumSquare;
}
结合Canvas动画实现完整碰撞效果
接下来我们搭建一个完整的Canvas动画场景，实现两个矩形元素的运动碰撞检测，当发生碰撞时改变元素的运动方向。首先需要搭建动画循环，使用requestAnimationFrame实现流畅的动画效果：
// 获取Canvas元素和上下文
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 设置Canvas尺寸
canvas.width = 800;
canvas.height = 500;
// 定义第一个矩形元素
const rect1 = {
x: 100,
y: 200,
width: 60,
height: 60,
speedX: 3,
speedY: 2,
color: '#ff0000'
};
// 定义第二个矩形元素
const rect2 = {
x: 500,
y: 200,
width: 80,
height: 80,
speedX: -2,
speedY: -3,
color: '#00ff00'
};
// 动画循环函数
function animate() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新第一个矩形位置
rect1.x += rect1.speedX;
rect1.y += rect1.speedY;
// 边界碰撞检测，碰到边界反弹
if (rect1.x <= 0 || rect1.x + rect1.width >= canvas.width) {
rect1.speedX = -rect1.speedX;
}
if (rect1.y <= 0 || rect1.y + rect1.height >= canvas.height) {
rect1.speedY = -rect1.speedY;
}
// 更新第二个矩形位置
rect2.x += rect2.speedX;
rect2.y += rect2.speedY;
// 边界碰撞检测
if (rect2.x <= 0 || rect2.x + rect2.width >= canvas.width) {
rect2.speedX = -rect2.speedX;
}
if (rect2.y <= 0 || rect2.y + rect2.height >= canvas.height) {
rect2.speedY = -rect2.speedY;
}
// 检测两个矩形是否碰撞
if (checkRectCollision(rect1, rect2)) {
// 碰撞后反转两个矩形的x轴运动方向
rect1.speedX = -rect1.speedX;
rect2.speedX = -rect2.speedX;
// 反转两个矩形的y轴运动方向
rect1.speedY = -rect1.speedY;
rect2.speedY = -rect2.speedY;
}
// 绘制第一个矩形
ctx.fillStyle = rect1.color;
ctx.fillRect(rect1.x, rect1.y, rect1.width, rect1.height);
// 绘制第二个矩形
ctx.fillStyle = rect2.color;
ctx.fillRect(rect2.x, rect2.y, rect2.width, rect2.height);
// 继续下一帧动画
requestAnimationFrame(animate);
}
// 启动动画
animate();
碰撞检测的优化建议
当动画中元素数量较多时，两两检测碰撞会带来较大的性能开销，可以采用以下方式优化：
- 使用空间划分算法，比如四叉树，减少需要检测的元素对数量
- 对于距离较远的元素，先通过粗略的范围判断排除不可能碰撞的元素
- 避免在每一帧都创建新的对象，复用碰撞检测中的临时变量
如果动画元素是不规则形状，还可以采用像素级碰撞检测，通过获取Canvas上两个元素的像素数据，判断是否存在非透明像素的重叠，不过这种方式的性能开销更大，只在必要场景下使用。
HTML5动画碰撞检测物理碰撞CanvasrequestAnimationFrame修改时间：2026-07-23 22:06:31