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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。 

 

转载于:https://www.cnblogs.com/loujady/archive/2011/12/07/2278792.html