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放置反弹效果随机图形(实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。