ES6与canvas实现鼠标小球跟随效果

2018-02-11 15:04:25来源:cnblogs.com作者:凌晨4点的阳光人点击

分享

               最近闲来无聊,看了下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             //小球半径默认4015             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             //小球半径默认4033             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>        

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台