Canvas放置反弹效果随机图形(实例)
Canvas放置反弹效果随机图形(实例)
varraf; vararror=[]; varrunning=false; //绘制圆形 functioncreateBall(){ return{ x:0, y:0, vx:10-Math.random()*10, vy:10-Math.random()*10, radius:25, color:"red", draw:function(){ ctx.beginPath(); ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true); ctx.closePath(); ctx.fillStyle=this.color; ctx.fill(); } } } //绘制正方形 functioncreateSquare(){ return{ x:0, y:0, vx:10-Math.random()*10, vy:10-Math.random()*10, color:"red", draw:function(){ ctx.beginPath(); ctx.fillStyle=this.color; ctx.fillRect(this.x,this.y,30,30); ctx.closePath(); } } } //绘制五角星 functioncreateStar(){ return{ x:0, y:0, vx:10-Math.random()*10, vy:10-Math.random()*10, color:"red", draw:function(){ ctx.font="24pxserif"; ctx.textBaseline="hanging"; ctx.fillStyle=this.color; ctx.fillText("五角星",this.x,this.y); } } } //绘制三角形 functioncreateTriangle(){ return{ x:0, y:0, vx:10-Math.random()*10, vy:10-Math.random()*10, color:"red", draw:function(){ ctx.beginPath(); ctx.moveTo(this.x,this.y); ctx.lineTo(this.x+25,this.y+25); ctx.lineTo(this.x+25,this.y-25); ctx.fillStyle=this.color; ctx.fill(); } } } //清除 functionclear(){ ctx.fillStyle='rgba(255,255,255,0.3)'; ctx.fillRect(0,0,canvas.width,canvas.height); } //判断图形坐标是否超出画布范围 functiondraw(){ clear(); arror.forEach(function(ball,i){ ball.draw(); ball.x+=ball.vx; ball.y+=ball.vy; if(ball.y+ball.vy>canvas.height||ball.y+ball.vy<0){ ball.vy=-ball.vy; } if(ball.x+ball.vx>canvas.width||ball.x+ball.vx<0){ ball.vx=-ball.vx; } }); raf=window.requestAnimationFrame(draw); } canvas.addEventListener('click',function(e){ if(!running){ raf=window.requestAnimationFrame(draw); running=true; } varcolorarr=["#000000","#7F7F7F","#880015","#ED1C24","#FF7F27","#FFF200","#22B14C","#00A2E8","#3F48CC","#A349A4","#B97A57","#FFAEC9","#B5E61D"]; varGraphics=["Round","Square","Star","Triangle"]; vartypexz=Graphics[Math.floor(Math.random()*4)]; varball; switch(typexz){ case"Round": ball=createBall(); break; case"Square": ball=createSquare(); break; case"Star": ball=createStar(); break; case"Triangle": ball=createTriangle(); break; } ball.x=e.clientX; ball.y=e.clientY; ball.color=colorarr[Math.floor(Math.random()*10+3)]; arror.push(ball); }); draw(); document.addEventListener('keydown',function(e){ if(e.keyCode==32){ event.preventDefault(); window.cancelAnimationFrame(raf); running=false; } })
以上这篇Canvas放置反弹效果随机图形(实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。