本文主要包含HTML5 ，椭圆运动等相关知识,匿名希望在学习及工作中可以帮助到您
椭圆与椭圆运动：
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 椭圆（蛋）运动的小球的代码实例的内容，更多相关内容请关注微课江湖（）！