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);

               //在画板中间绘制球

            context.beginPath();

            context.arc(ball.x, ball.y, newBall.radius, 0, 2 * Math.PI, false);

            context.fillStyle = ball.color;

            context.fill();

            context.lineWidth = 5;

            context.strokeStyle = "#ff0000";

            context.stroke();

           }

           //绘制小球的移动轨迹

           function DrawBallLine()

           {

                    for(var i=0;i<points.length;i++)

                    {

                        if(i==0)

                        {

                            context.moveTo(points[i].x,points[i].y)

                        }

                        context.lineTo(points[i].x,points[i].y)

                        context.stroke();

                    }

           }

           //写蛋疼

           function DrawText(text,x,y)

           {

                context.font = "40pt Arial";

             context.fillText(text, x, y);

           }   

 

 

 

 

 

 

 

作者：Louja