html5 canvas跟随鼠标光标移动出现的圆点泡泡动画特效

js代码

<script src="underscore.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//设置画布
			const canvas=document.getElementById("canvas");
	const ctx=canvas.getContext('2d');
	canvas.width=1000;
	canvas.height=400;
	canvas.style.backgroundColor="#000";
	
	//小球类
	class Ball{
		constructor(x,y,color){
			this.x=x;
			this.y=y;
			this.color=color;
			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=_.random(-5,5);
			this.dY=_.random(-5,5);
			this.dR=_.random(1,3);
		}
		
		upDate(){
			this.x += this.dX;
			this.y += this.dY;
			this.r -= this.dR;
			if (this.r < 0) {
						this.r = 0;
					}
		}
	}
	
	let ballArr=[];
	let colorArr=['red','green','purple','blue','orange','pink'];
	
	canvas.addEventListener('mousemove',function (e) {
		ballArr.push(new MoveBall(e.offsetX,e.offsetY,colorArr[_.random(0,colorArr.length-1)]));
			})
	
	setInterval(function(){
		ctx.clearRect(0,0,canvas.width,canvas.height);
		
		for (let i=0;i<ballArr.length;i++) {
					ballArr[i].render();
			ballArr[i].upDate();
				}
	},50);
</script>