<!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绘制弹跳小球。
