最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效——随着鼠标的移动，会有小球跟随且自动消失的动画。
首先，html部分，目前就一个canvas标签。
<canvas id="canvas"> 当前浏览器不支持！ </canvas>
其次，css部分，没有考虑美观，大家喜欢的话，可以自己添加样式
<style> body{ margin: 90px; } #canvas{ box-shadow: 0 0 5px; } </style>最后，看下js实现部分
<script> const canvas = document.getElementById("canvas"); canvas.height = 600; canvas.width = 1000; canvas.style.backgroundColor = "#000"; const ctx = canvas.getContext("2d"); //小球类 class Ball{ constructor(x, y, color){ this.x = x; this.y = y; this.color = color; //小球半径默认40 this.r = 40; } //绘制小球 render(){ ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } } //移动小球 class MoveBall extends Ball{ constructor(x, y, color){ super(x, y, color); this.dX = Math.floor(Math.random()*5+1); this.dY = Math.floor(Math.random()*5+1); this.dR = Math.floor(Math.random()*5+1); } upData(){ this.x += this.dX; this.y += this.dY; this.r -= this.dR; if(this.r < 0){ this.r = 0; } } } let ballArry = []; let colorArry = [red, green, pink, yellow, blue]; canvas.addEventListener("mousemove",function(e){ ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)])); }) setInterval(function(){ ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i=0;i<ballArry.length;i++){ ballArry[i].render(); ballArry[i].upData(); } },50); </script>稍作解释下我的设计思路：
首先，获取canvas对象，获取上下文，设置一些基本的属性。（canvas不做过多描述，具体的可以去w3自己研究）。然后，先定义一个Ball的类，里面有小球的圆心坐标位置，以及半径和颜色。在定义一个画小球的方法，具体的画圆实现，不懂的可以去canvas文档自己去看。
在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法，用来改变小球的半径以及颜色属相。
最后，开启一个定时器，当鼠标移动时，把生成的小球存储到数组中，然后遍历循环读取小球，并改变小球的样式，达到最终的效果。
最后附上完整代码。直接拷贝浏览器运行。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>会动的小球</title> <style> body{ margin: 90px; } #canvas{ box-shadow: 0 0 5px; } </style></head><body> <canvas id="canvas"> 当前浏览器不支持！ </canvas> <script> const canvas = document.getElementById("canvas"); canvas.height = 600; canvas.width = 1000; canvas.style.backgroundColor = "#000"; const ctx = canvas.getContext("2d"); //小球类 class Ball{ constructor(x, y, color){ this.x = x; this.y = y; this.color = color; //小球半径默认40 this.r = 40; } //绘制小球 render(){ ctx.save(); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); ctx.restore(); } } //移动小球 class MoveBall extends Ball{ constructor(x, y, color){ super(x, y, color); this.dX = Math.floor(Math.random()*5+1); this.dY = Math.floor(Math.random()*5+1); this.dR = Math.floor(Math.random()*5+1); } upData(){ this.x += this.dX; this.y += this.dY; this.r -= this.dR; if(this.r < 0){ this.r = 0; } } } let ballArry = []; let colorArry = [red, green, pink, yellow, blue]; canvas.addEventListener("mousemove",function(e){ ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)])); }) setInterval(function(){ ctx.clearRect(0, 0, canvas.width, canvas.height); for(let i=0;i<ballArry.length;i++){ ballArry[i].render(); ballArry[i].upData(); } },50); </script></body></html>以上所述是小编给大家介绍的ES6与canvas实现鼠标小球跟随鼠标效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
