当前位置:编程学习 > html/css >>

HTML5 椭圆(蛋)运动的小球

 

椭圆与椭圆运动:

 

 

 

             var canvas=document.getElementById("ballBroad");

 

            var context=canvas.getContext("2d");

            //角度

            var angle=0;

            //角度步长

            var speedAngle=0.1;

           

            //刷新频率

            var frames=1000/60;

            //球对象

            var Ball=function(radius,color,x,y)

            {

                this.radius=radius;

                this.color=color;

                this.x=x;

                this.y=y;

            }

            //中心点

            var centerX=canvas.width/2;

            var centerY=canvas.height/2;

            //存放小球走过的点

            var points=[];

           

           

            //创建一个球

            var newBall=new Ball(20,"#ff000",0,centerY);

            

            //在画板中间绘制球

            //DrawBall(newBall);

            //存放

            //points.push({x:newBall.x,y:newBall.y});

           

           

            //让球平稳的动起来

            var drawAsync = eval(Jscex.compile("async", function () {

                        while(true)

                        {

                            newBall.y=centerY+Math.sin(angle)*(centerY/2+20);

                            newBall.x=centerX+Math.cos(angle)*centerX;

                            angle+=speedAngle;

                            DrawBall(newBall);

                            //存放小球的点

                            points.push({x:newBall.x,y:newBall.y});

                           

                            //绘制线条

                            DrawBallLine();

                            //画蛋疼

                            DrawText("蛋疼",centerX-50,centerY);

                            //每秒60次

                            $await(Jscex.Async.sleep(frames));

                           

                        }   

                       

                                                                   

            }));

           drawAsync().start();

          

           function DrawBall(ball)

           {

               context.clearRect(0, 0, canvas.width, canvas.height);

               //在画板中间绘制球

         

补充:web前端 , HTML 5 ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,