最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效——随着鼠标的移动，会有小球跟随且自动消失的动画。
首先，html部分，目前就一个canvas标签。
1 <canvas id="canvas">
2 当前浏览器不支持！
3 </canvas>
其次，css部分，没有考虑美观，大家喜欢的话，可以自己添加样式
1 <style>
2 body{
3 margin: 90px;
4 }
5 #canvas{
6 box-shadow: 0 0 5px;
7 }
8 </style>
最后，看下js实现部分
1 <script>
2 const canvas = document.getElementById("canvas");
3 canvas.height = 600;
4 canvas.width = 1000;
5 canvas.style.backgroundColor = "#000";
6 const ctx = canvas.getContext("2d");
7
8 //小球类
9 class Ball{
10 constructor(x, y, color){
11 this.x = x;
12 this.y = y;
13 this.color = color;
14 //小球半径默认40
15 this.r = 40;
16 }
17 //绘制小球
18 render(){
19 ctx.save();
20 ctx.beginPath();
21 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
22 ctx.fillStyle = this.color;
23 ctx.fill();
24 ctx.restore();
25 }
26 }
27 //移动小球
28 class MoveBall extends Ball{
29 constructor(x, y, color){
30 super(x, y, color);
31
32 this.dX = Math.floor(Math.random()*5+1);
33 this.dY = Math.floor(Math.random()*5+1);
34 this.dR = Math.floor(Math.random()*5+1);
35 }
36
37 upData(){
38 this.x += this.dX;
39 this.y += this.dY;
40 this.r -= this.dR;
41 if(this.r < 0){
42 this.r = 0;
43 }
44 }
45 }
46
47 let ballArry = [];
48 let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
49
50 canvas.addEventListener("mousemove",function(e){
51 ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
52 })
53
54 setInterval(function(){
55 ctx.clearRect(0, 0, canvas.width, canvas.height);
56
57 for(let i=0;i<ballArry.length;i++){
58 ballArry[i].render();
59 ballArry[i].upData();
60 }
61 },50);
62 </script>
稍作解释下我的设计思路：
首先，获取canvas对象，获取上下文，设置一些基本的属性。（canvas不做过多描述，具体的可以去w3自己研究）。然后，先定义一个Ball的类，里面有小球的圆心坐标位置，以及半径和颜色。在定义一个画小球的方法，具体的画圆实现，不懂的可以去canvas文档自己去看。
在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法，用来改变小球的半径以及颜色属相。
最后，开启一个定时器，当鼠标移动时，把生成的小球存储到数组中，然后遍历循环读取小球，并改变小球的样式，达到最终的效果。
最后附上完整代码。直接拷贝浏览器运行。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>会动的小球</title>
6 <style>
7 body{
8 margin: 90px;
9 }
10 #canvas{
11 box-shadow: 0 0 5px;
12 }
13 </style>
14 </head>
15 <body>
16 <canvas id="canvas">
17 当前浏览器不支持！
18 </canvas>
19 <script>
20 const canvas = document.getElementById("canvas");
21 canvas.height = 600;
22 canvas.width = 1000;
23 canvas.style.backgroundColor = "#000";
24 const ctx = canvas.getContext("2d");
25
26 //小球类
27 class Ball{
28 constructor(x, y, color){
29 this.x = x;
30 this.y = y;
31 this.color = color;
32 //小球半径默认40
33 this.r = 40;
34 }
35 //绘制小球
36 render(){
37 ctx.save();
38 ctx.beginPath();
39 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
40 ctx.fillStyle = this.color;
41 ctx.fill();
42 ctx.restore();
43 }
44 }
45 //移动小球
46 class MoveBall extends Ball{
47 constructor(x, y, color){
48 super(x, y, color);
49
50 this.dX = Math.floor(Math.random()*5+1);
51 this.dY = Math.floor(Math.random()*5+1);
52 this.dR = Math.floor(Math.random()*5+1);
53 }
54
55 upData(){
56 this.x += this.dX;
57 this.y += this.dY;
58 this.r -= this.dR;
59 if(this.r < 0){
60 this.r = 0;
61 }
62 }
63 }
64
65 let ballArry = [];
66 let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
67
68 canvas.addEventListener("mousemove",function(e){
69 ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
70 })
71
72 setInterval(function(){
73 ctx.clearRect(0, 0, canvas.width, canvas.height);
74
75 for(let i=0;i<ballArry.length;i++){
76 ballArry[i].render();
77 ballArry[i].upData();
78 }
79 },50);
80 </script>
81 </body>
82 </html>
