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; ipoints.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

椭圆与椭圆运动：

             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; ipoints.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

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！