HTML5 上下平稳移动的球

上下平稳运动

 

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

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

            //角度

            var angle=0;

            //步长

            var speed=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 newBall=new Ball(20,"#ff000",canvas.width/2,canvas.height/2);

            

            //在画板中间绘制球 

            DrawBall(newBall);

            

            //让球平稳的动起来

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

                        while(true)

                        {

                            newBall.y=canvas.height/2+Math.sin(angle)*canvas.height/2;

                            angle+=speed;

                            DrawBall(newBall);

                            //每秒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 = "#000";

            context.stroke();

           }

            

 

作者：Louja
出处：http://loujady.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。