椭圆与椭圆运动：
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<points.length;i++) { if(i==0) { context.moveto(points[i].x,points[i].y) } context.lineto(points[i].x,points[i].y) context.stroke(); } } //写蛋疼 function drawtext(text,x,y) { context.font = "40pt arial"; context.filltext(text, x, y); }
以上就是html5 椭圆（蛋）运动的小球的代码实例的内容。