最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效——随着鼠标的移动，会有小球跟随且自动消失的动画。
首先，html部分，目前就一个canvas标签。
11 <canvas id="canvas"> 22 当前浏览器不支持！ 33 </canvas>
其次，css部分，没有考虑美观，大家喜欢的话，可以自己添加样式
11 <style> 22 body{ 33 margin: 90px; 44 } 55 #canvas{ 66 box-shadow: 0 0 5px; 77 } 88 </style>
最后，看下js实现部分
1 1 <script> 2 2 const canvas = document.getElementById("canvas"); 3 3 canvas.height = 600; 4 4 canvas.width = 1000; 5 5 canvas.style.backgroundColor = "#000"; 6 6 const ctx = canvas.getContext("2d"); 7 7 8 8 //小球类 9 9 class Ball{ 1010 constructor(x, y, color){ 1111 this.x = x; 1212 this.y = y; 1313 this.color = color; 1414 //小球半径默认40 1515 this.r = 40; 1616 } 1717 //绘制小球 1818 render(){ 1919 ctx.save(); 2020 ctx.beginPath(); 2121 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); 2222 ctx.fillStyle = this.color; 2323 ctx.fill(); 2424 ctx.restore(); 2525 } 2626 } 2727 //移动小球 2828 class MoveBall extends Ball{ 2929 constructor(x, y, color){ 3030 super(x, y, color); 3131 3232 this.dX = Math.floor(Math.random()*5+1); 3333 this.dY = Math.floor(Math.random()*5+1); 3434 this.dR = Math.floor(Math.random()*5+1); 3535 } 3636 3737 upData(){ 3838 this.x += this.dX; 3939 this.y += this.dY; 4040 this.r -= this.dR; 4141 if(this.r < 0){ 4242 this.r = 0; 4343 } 4444 } 4545 } 4646 4747 let ballArry = []; 4848 let colorArry = ['red', 'green', 'pink', 'yellow', 'blue']; 4949 5050 canvas.addEventListener("mousemove",function(e){ 5151 ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)])); 5252 }) 5353 5454 setInterval(function(){ 5555 ctx.clearRect(0, 0, canvas.width, canvas.height); 5656 5757 for(let i=0;i<ballArry.length;i++){ 5858 ballArry[i].render(); 5959 ballArry[i].upData(); 6060 } 6161 },50); 6262 </script>
稍作解释下我的设计思路：
首先，获取canvas对象，获取上下文，设置一些基本的属性。（canvas不做过多描述，具体的可以去w3自己研究）。然后，先定义一个Ball的类，里面有小球的圆心坐标位置，以及半径和颜色。在定义一个画小球的方法，具体的画圆实现，不懂的可以去canvas文档自己去看。
在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法，用来改变小球的半径以及颜色属相。
最后，开启一个定时器，当鼠标移动时，把生成的小球存储到数组中，然后遍历循环读取小球，并改变小球的样式，达到最终的效果。
最后附上完整代码。直接拷贝浏览器运行。
1 1 <!DOCTYPE html> 2 2 <html lang="en"> 3 3 <head> 4 4 <meta charset="UTF-8"> 5 5 <title>会动的小球</title> 6 6 <style> 7 7 body{ 8 8 margin: 90px; 9 9 } 1010 #canvas{ 1111 box-shadow: 0 0 5px; 1212 } 1313 </style> 1414 </head> 1515 <body> 1616 <canvas id="canvas"> 1717 当前浏览器不支持！ 1818 </canvas> 1919 <script> 2020 const canvas = document.getElementById("canvas"); 2121 canvas.height = 600; 2222 canvas.width = 1000; 2323 canvas.style.backgroundColor = "#000"; 2424 const ctx = canvas.getContext("2d"); 2525 2626 //小球类 2727 class Ball{ 2828 constructor(x, y, color){ 2929 this.x = x; 3030 this.y = y; 3131 this.color = color; 3232 //小球半径默认40 3333 this.r = 40; 3434 } 3535 //绘制小球 3636 render(){ 3737 ctx.save(); 3838 ctx.beginPath(); 3939 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); 4040 ctx.fillStyle = this.color; 4141 ctx.fill(); 4242 ctx.restore(); 4343 } 4444 } 4545 //移动小球 4646 class MoveBall extends Ball{ 4747 constructor(x, y, color){ 4848 super(x, y, color); 4949 5050 this.dX = Math.floor(Math.random()*5+1); 5151 this.dY = Math.floor(Math.random()*5+1); 5252 this.dR = Math.floor(Math.random()*5+1); 5353 } 5454 5555 upData(){ 5656 this.x += this.dX; 5757 this.y += this.dY; 5858 this.r -= this.dR; 5959 if(this.r < 0){ 6060 this.r = 0; 6161 } 6262 } 6363 } 6464 6565 let ballArry = []; 6666 let colorArry = ['red', 'green', 'pink', 'yellow', 'blue']; 6767 6868 canvas.addEventListener("mousemove",function(e){ 6969 ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)])); 7070 }) 7171 7272 setInterval(function(){ 7373 ctx.clearRect(0, 0, canvas.width, canvas.height); 7474 7575 for(let i=0;i<ballArry.length;i++){ 7676 ballArry[i].render(); 7777 ballArry[i].upData(); 7878 } 7979 },50); 8080 </script> 8181 </body> 8282 </html>