HTML5 做波形运动的小球

波形运动：

     var canvas=document.getElementById("ballBroad");
             var context=canvas.getContext("2d");
             // 角度
             var angle=0;
             // Y步长
             var speedY=0.1;
             // x步长
             var speedX=3;
             // 刷新频率
             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;
                            newBall.x+=speedX;
                             if(newBall.x>canvas.width)
                            {
                                newBall.x=0;
                                points=[];
                            }
                            angle+=speedY;
                            DrawBall(newBall);
                             // 存放小球的点
                            points.push({x:newBall.x,y:newBall.y});
                            
                             // 绘制线条
                            DrawBallLine();
                             // 每秒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();
                    }
           }
            

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