canvas绘制弹跳小球

 <!doctype html>
 <html>
 <head>
   <meta charset="UTF-8">
   <title>canvasTest</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=22;
         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()*30-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 = 1000 -  balls[i].r ;
                  balls[i].vx = - balls[i].vx*0.7;
             }
             if(balls[i].x<=0+  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>