代码改变世界

HTM5 Canvas 会回弹的球

2011-12-09 18:18 by LoujaDy, ... 阅读, ... 评论, 收藏, 编辑

应该叫啥?屏幕环绕

 

         //获取舞台

            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
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此声明,且在文章页面给出原文连接,否则保留追究法律责任的权利。