HTML5 elliptical (egg) moving ball code example

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;i
        

         Copy after login