Heim > Artikel > Web-Frontend > HTML5-Codebeispiel für eine elliptische (Ei) bewegliche Kugel
Elliptische und elliptische Bewegung:
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); }
Das Obige ist der Inhalt des HTML5-Codebeispiels für einen elliptischen (Ei) beweglichen Ball. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!