躁动的小球特效
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了躁动的小球特效相关的知识，希望对你有一定的参考价值。
原生js制作（es6）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #myCanvas{ border: 1px solid red; } </style> </head> <body> <canvas id="myCanvas" width="500" height="300"></canvas> <script> var rand = (min,max) => parseInt(Math.random()*(max-min)+min); var myCanvas = document.querySelector(‘#myCanvas‘); var ctx = myCanvas.getContext(‘2d‘); const canvasWidth = myCanvas.width; const canvasHeigh = myCanvas.height; class Ball{ constructor(ctx,canvasWidth,canvasHeigh){ this.ctx = ctx; // 颜色 this.color = `rgb(${rand(1,256)},${rand(1,256)},${rand(1,256)})`; // 半径 var r = rand(2,10); this.r = r; // 坐标 this.x = rand(r,canvasWidth-r); this.y = rand(r,canvasHeigh-r); // 可移动的峰值 this.maxWidth = canvasWidth - r; this.maxHeight = canvasHeigh - r; // 速度 var speedX = rand(1,3); this.speedX = rand(0,2) > 0 ? speedX : -speedX; var speedY = rand(1,3); this.speedY = rand(0,2) > 0 ? speedY : -speedY; } draw(){ this.ctx.beginPath(); this.ctx.fillStyle = this.color; this.ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true); this.ctx.closePath(); this.ctx.fill(); } move(){ this.x += this.speedX; if(this.x >= this.maxWidth){ this.speedX *= -1; }else if(this.x < this.r){ this.speedX *= -1; } this.y += this.speedY; if(this.y >= this.maxHeight){ this.speedY *= -1; }else if(this.y < this.r){ this.speedY *= -1; } } } var balls = []; for(let i=0;i<100;i++){ var ball = new Ball(ctx,canvasWidth,canvasHeigh); balls.push(ball); } setInterval(function(){ ctx.clearRect(0,0,canvasWidth,canvasHeigh) for(let key in balls){ var ball = balls[key]; ball.draw(); ball.move(); } },30) </script> </body> </html>
以上是关于躁动的小球特效的主要内容，如果未能解决你的问题，请参考以下文章