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