今天小编跟大家讲解下有关ES6与canvas实现鼠标小球跟随效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关ES6与canvas实现鼠标小球跟随效果 的相关资料，希望小伙伴们看了有所帮助。
最近闲来无聊 看了下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实现鼠标小球跟随鼠标效果 希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！
来源：爱蒂网
