波形运动：
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(); } }