canvas绘制弹跳小球 

 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>canvasTest</title>
 6 </head>
 7 
 8 <body>
 9 <input type="button" id="clbtn" value="清除画布" style="border:1px solid #444;display:block;margin: 10px auto;" />
10 <canvas id="canvas" style="border:1px solid #444;display:block;margin: 10px auto;"></canvas>
11 </body>
12 <script>
13 window.onload=function(){
14     var clbtn=document.getElementById("clbtn");
15     var canvas=document.getElementById("canvas");
16     var cxt=canvas.getContext("2d");
17     canvas.width=1000;
18     canvas.height=500;
19     function ball(x,y,vx,colorindex){
20         this.x=x;
21         this.y=y;
22         this.r=22;
23         this.g=2;
24         this.vx=vx;
25         this.vy=-20;
26         this.colorindex=colorindex;
27         this.color=['red','blue','green','orange','yellow','pink'];
28     };
29     var balls=[];
30     
31 //    context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=flase)
32 //                  圆心坐标    ，半径值   ，开始角度    ，结束角度，    顺逆时针(默认flase顺时针)
33     canvas.onmousedown=function(){
34         canvas.onmousemove=function(e){
35             var e= event || ev;
36             var x = e.clientX-canvas.offsetLeft;
37             var y = e.clientY-canvas.offsetTop+document.body.scrollTop;
38             
39             balls.push(new ball(x,y,Math.floor(Math.random()*30-5),Math.floor(Math.random()*6+1)));
40     
41             }
42         };
43     canvas.onmouseup=function(){
44         canvas.onmousemove=null;
45         };
46 
47     setInterval(function(){
48         cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);//清除画布20帧
49         for(var i = 0 ;i<balls.length;i++)
50         {
51             balls[i].x += balls[i].vx;
52             balls[i].y += balls[i].vy;
53             balls[i].vy += balls[i].g;
54             cxt.beginPath();
55             cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);
56             cxt.closePath();
57             cxt.fillStyle=balls[i].color[balls[i].colorindex];
58             cxt.fill();
59             cxt.strokeStyle='white';
60             cxt.stroke();
61             document.title = balls.length;
62             
63             if(  balls[i].y>=500 -  balls[i].r)
64             {
65                  balls[i].y = 500 -  balls[i].r;
66                  balls[i].vy = - balls[i].vy*0.7;
67             }
68             if(  balls[i].x>=1000 -  balls[i].r ) 
69             {
70                 balls[i].x = 1000 -  balls[i].r ;
71                  balls[i].vx = - balls[i].vx*0.7;
72             }
73             if(balls[i].x<=0+  balls[i].r)
74             {
75                 balls[i].x = 0 +  balls[i].r ;
76                  balls[i].vx = - balls[i].vx*0.7;
77             }
78         };
79         
80         },50);
81 
82 clbtn.onclick=function(){
83         cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height);
84         balls.splice(0,balls.length);//清空数组 
85         };
86 }
87 
88 </script>
89 </html>

 

posted @ 2015-04-02 11:44  Hx2JS  阅读(470)  评论(2)    收藏  举报