HTM5 Canvas 会回弹的球

应该叫啥？屏幕环绕

 

         //获取舞台

             var canvas=document.getElementById("stage");
             // 绘图接口
             var context=canvas.getContext("2d");
            
             // 中心点位置
             var centerX=canvas.width/2;
             var centerY=canvas.height/2;
            
             // 运动的球
             var ball= function(x,y,vx,vy,radius,color)
            {
                 this.x=x;
                 this.y=y;
                                
                 this.vx=vx;
                 this.vy=vy;
                 this.radius=radius;
                 this.color=color;
                
                
                 // 绘制球
                 this.draw= function()
                {
                    
                    context.beginPath();                    
                    context.strokeStyle =  this.color;
                    context.fillStyle =  this.color;   
                    context.lineWidth = 2;                
                    context.arc( this.x,  this.y,  this.radius, 0, 2 * Math.PI,  false);                     
                    context.fill();                    
                    context.stroke();
                    context.closePath();

                }                
            }            
            
             var balls=[]
             // 创建一组球
             for( var i=0;i<20;i++)
            {                
                 var b= new ball(centerX,centerY,Math.random()*5-1,Math.random()*8-2,10,"#ff0000");
                b.draw();        
                balls.push(b);        
            }
            
             // 动画
             var drawAsync = eval(Jscex.compile("async",  function () {
                            
                             while( true)
                            {
                                context.clearRect(0,0, canvas.width, canvas.height);
                                   for( var i=0;i<balls.length;i++)
                                   {    
                                            if(balls[i].x+balls[i].radius>canvas.width || balls[i].x-balls[i].radius<0)
                                           {
                                               balls[i].vx*=-1;
                                           }                    
                                            if(balls[i].y+balls[i].radius>canvas.height || balls[i].y-balls[i].radius<0)
                                           {
                                               balls[i].vy*=-1;
                                           }
                                          balls[i].x+=balls[i].vx;
                                          balls[i].y+=balls[i].vy;
                                          
                                          
                                          
                                          balls[i].draw();
                                  }
                                 $await(Jscex.Async.sleep(1000/60));
                             }       
                }));
                drawAsync().start();

 作者：Louja

出处：http://loujady.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。