ES6与canvas实现鼠标小球跟随效果
最近闲来无聊，看了下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>
版权声明：本文为wzq201607原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。