<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>canvas多弹跳小球</title>
</head>
<body>
<input type="button" id="clbtn" value="清除画布" style="border:1px solid #444;display:block;margin: 10px auto;" />
<canvas id="canvas" style="border:1px solid #444;display:block;margin: 10px auto;"></canvas>
</body>
<script>
window.onload=function(){
var clbtn=document.getElementById("clbtn");
var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");
canvas.width=1000;
canvas.height=500;
function ball(x,y,vx,colorindex){
this.x=x;
this.y=y;
this.r=20;
this.g=2;
this.vx=vx;
this.vy=-20;
this.colorindex=colorindex;
this.color=[‘red‘,‘blue‘,‘green‘,‘orange‘,‘yellow‘,‘pink‘];
};
var balls=[];
// context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=flase)
// 圆心坐标 ，半径值 ，开始角度 ，结束角度， 顺逆时针(默认flase顺时针)
canvas.onmousedown=function(){
canvas.onmousemove=function(e){
var e= event || ev;
var x = e.clientX-canvas.offsetLeft;
var y = e.clientY-canvas.offsetTop+document.body.scrollTop;
balls.push(new ball(x,y,Math.floor(Math.random()*50-5),Math.floor(Math.random()*6+1)));
}
};
canvas.onmouseup=function(){
canvas.onmousemove=null;
};
setInterval(function(){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);//清除画布20帧
for(var i = 0 ;i<balls.length;i++)
{
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g;
cxt.beginPath();
cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
cxt.closePath();
cxt.fillStyle=balls[i].color[balls[i].colorindex];
cxt.fill();
cxt.strokeStyle=‘white‘;
cxt.stroke();
document.title = balls.length;
if( balls[i].y>=500 - balls[i].r)
{
balls[i].y = 500 - balls[i].r;
balls[i].vy = - balls[i].vy*0.7;
}
if( balls[i].x>=1000 - balls[i].r || balls[i].x<=0- balls[i].r)
{
balls[i].vx = - balls[i].vx*0.7;
}
};
},50);
clbtn.onclick=function(){
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
balls.splice(0,balls.length);//清空数组
};
}
</script>
</html>
canvas绘制弹跳小球。
时间： 2024-10-27 11:44:05