一款好看的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>
代码下载：https://pan.baidu.com/s/1AyCe3ShA5Ce6jFACIXK1ew
