<script src="https://underscorejs.net/underscore.js"></script> | |
</head> | |
<body> | |
<canvas id="canvas"></canvas> | |
<script> | |
var canvas=document.getElementById("canvas"); | |
var ctx=canvas.getContext("2d"); | |
canvas.width=1500; | |
canvas.height=1000; | |
canvas.style.backgroundColor="black"; | |
class Ball{ | |
constructor(x,y,color){ | |
this.x=x; | |
this.y=y; | |
this.color=color; | |
this.r=80; | |
} | |
render(){ | |
ctx.beginPath(); | |
var start = 0; | |
for (var i = 0; i < 500; i++) { | |
start += Math.PI * 2 / 500; | |
var end = start + Math.PI * 2 / 500; | |
var r = this.r * (1 + Math.sin(start)); | |
ctx.arc(this.x, this.y, r, start, end, false); | |
} | |
ctx.fillStyle = this.color; | |
ctx.fill(); | |
} | |
} | |
class moveBall extends Ball{ | |
constructor(x,y,color){ | |
super(x,y,color); | |
this.dx=_.random(-5,5); | |
this.dy=_.random(-5,50); | |
this.dr=_.random(3,5); | |
} | |
update(){ | |
this.x+=this.dx; | |
this.y+=this.dy; | |
this.r-=this.dr; | |
if(this.r<0) | |
this.r=0; | |
} | |
} | |
var ballArr=[]; | |
var colorArr=["red","orange","yellow"]; | |
var a=true; | |
canvas.addEventListener("mousemove",function(e){ | |
if(a){ | |
a=false; | |
var timer=setTimeout(()=>{a=true},100); | |
e=e||event; | |
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(var i=0;i<ballArr.length;i++) | |
{ | |
ballArr[i].render(); | |
ballArr[i].update(); | |
} | |
}, 50); | |
</script> | |
</body> | |
</html> |
js 爱心
最新推荐文章于 2024-08-27 21:01:56 发布