Canvas实现球体碰撞交互效果(一)这篇文章我将带你从零到一手撸一个球体碰撞的交互效果，不使用任何第三方库，详细讲解每

一、Canvas简介

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

二、文章简介

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

下面是最终实现的效果球体碰撞交互效果.gif

三、搭建开发界面

实现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);