制作一个炫酷的多小球碰碰的 JS 网页特效，入门弹性碰撞模拟和类的应用

目录

前言

在前端开发里，canvas 是 HTML5 里最炫酷的工具。我们今天就来搞一个这样的梦幻的效果，学习一下 ES6 的类在开发一个完整项目的思路（即 ES5 的构造函数），还有物理碰撞的程序的实现，当然，效果也很酷炫！

完整代码在此处。

先画一个圆

使用“类”这种被广泛应用的面向对象的概念，我们可以更好的整理我们的代码，做出更大的项目。

所以我们先创建一个 <canvas> 画板的类 class Canvas { } ，以便抽象我们之后对 <canvas> 的操作。

然后再向类里添加第一个方法 drawCircle() ，作为我们的测试吧，就是先画一个最简单的元素 --- 圆！

完整代码如下 （可以在 这个编辑器 进行简单调试）：

<body></body>
<script>
 class Canvas {
 constructor(parent = document.body, width = 400, height = 400){
 this.canvas = document.createElement('canvas');
 this.canvas.width = width; // canvas 的高
 this.canvas.height = height; // canvas 的高
 parent.appendChild(this.canvas); // 向 DOM 中添加 canvas
 this.ctx = this.canvas.getContext('2d'); // 画笔
 }
 drawCircle(actor){ // 画一个圆
 this.ctx.strokeStyle = 'black';
 this.ctx.strokeRect(0, 0, this.canvas.width, this.canvas.height); // 画出边框
 this.ctx.beginPath();
 this.ctx.arc(actor.position.x, actor.position.y, actor.radius, 0, Math.PI * 2);
 this.ctx.closePath();
 this.ctx.fillStyle = actor.color;
 this.ctx.fill();
 }
 }
 
 // ------------ 测试
 
 const draw = new Canvas(); // 声明一个画布类
 
 const ball = { // 定义一个 圆
 position : {
 x : 100,
 y : 100,
 },
 radius : 25,
 color : 'blue',
 };
 draw.drawCircle(ball); // 绘制
</script>

在代码里，我们定义了一个圆的属性，即 位置 x y 和半径 、 颜色。通过这种井井有条又优雅的方式，我们的目的就达到了！

这就是一切的基础，一切从这里开始。

完善我们的类

我们直接使用 ball 显然是不够的，小球它们要有自己的思想，我们的 Canvas 类要只负责绘制，所以我们需要重新开辟一个类，叫 Ball 类，来处理它们自己的“思想”。

而 canvas 类也需要更多的可扩展性，今天我们是画圆，明天我们想画圈、方块，我们也要考虑到，所以现在，我们要完善一下。

完整代码如下，这样就完美了 ~

<body></body>
<script>
 class Canvas{
 constructor(parent = document.body, width = 400, height = 400){
 this.canvas = document.createElement('canvas');
 this.canvas.width = width; // canvas 的高
 this.canvas.height = height; // canvas 的高
 parent.appendChil