Canvas实现球体碰撞交互效果(一)

一、Canvas简介

提到Canvas相信做前端开发的同学都不陌生，它是一个用于绘制图形的容器，我们会在一些特殊场景时需要用到Canvas，比如我们要在页面上显示一个流程图，这个流程图需要根据后端返回的数据动态显示时，就可以使用Canvas进行绘制，它可以实时的根据数据进行计算，再比如，我们要做一个动画效果，特别是需要有交互的动画效果时，我们就可以使用Canvas去实现。

二、文章简介

相信大部分同学使用Canvas也只是绘制静态界面，比如上面提到的流程图，如果要让你用Canvas做一个动画，或者是接下来我们将要实现的球体碰撞效果，你是否就会有点无从下手的感觉，这篇文章我将带你从零到一手撸一个球体碰撞的交互效果，不使用任何第三方库，详细为你讲解每一步的实现逻辑，真正做到保姆级教学，这样才能保证你能从中学到原理上的东西，以后做Canvas动画时就可以做到信手拈来，学完该课程，就相当于掌握了sphere-collision这个库的核心源码。在文章的最后我也会将完整的源代码贴出来供大家参考。

下面是最终实现的效果

三、搭建开发界面

实现Canvas动画的核心原理就是使用window. requestAnimationFrame，一帧一帧不停地进行整个页面的绘制，就像是播放幻灯片一样，当播放的帧率达到一定时，那么人的肉眼就看不出中间的切换卡顿，而看到的是流畅的动画效果。后面我们写的逻辑代码都是在loop这个函数中循环执行的。

index.html内容

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Canvas实现球体碰撞交互效果</title><style>html,body {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;}</style></head><body><canvas id="myCanvas">您的浏览器版本过低，请更新浏览器版本</canvas><script src="index.js"></script></body>
</html>

index.js内容

const canvasWidth = window.innerWidth; // 画布宽度
const canvasHeight = window.innerHeight; // 画布高度
const canvasBgColor = "#222222"; // 画布背景颜色const canvas = document.getElementById("myCanvas");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const ctx = canvas.getContext("2d");function loop() {// 绘制整个画布的背景色ctx.clearRect(0, 0, canvasWidth, canvasHeight);ctx.fillStyle = canvasBgColor;ctx.fillRect(0, 0, canvasWidth, canvasHeight);requestAnimationFrame(loop);
}// 循环绘制(loop函数中继续调用requestAnimationFrame函数)
requestAnimationFrame(loop);