欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5 椭圆(蛋)运动的小球

程序员文章站 2022-04-21 20:24:02
  椭圆与椭圆运动:            ...

 

椭圆与椭圆运动:

 

 

 

             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