&nbs p;
椭 圆 与椭圆运动：
VAR canvas=document.getElementById("ball br oad");
var context=canvas.getContext("2d");
//角度
var angle=0;
//角度步长
var s PE edAngle=0.1;
//刷新频率
var fr am es=1000/60;
//球对象
var Ball=function(radius,color,x,y)
{
this .radius=radius;
this.color=color;
this.x=x;
this.y=y;
}
//中心点
var center X=canvas.width/2;
var centerY=canvas.h ei ght/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 .COM pile("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次
$aw ai t(Jscex.Async.sleep(frames));
}
}));
drawAsync().start();
function DrawBall(ball)
{
context.clearRect(0, 0, canvas.width, canvas.height);
//在画板中间绘制球
context.be gin Path();
context.arc(ball.x, ball.y, newBall.radius, 0, 2 * Math.PI, false);
context.fillStyle = ball.color;
context.fill();
context.lineWidth = 5;
context. stroke Style = "#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.l inet o(points[i].x,points[i].y)
context.stroke();
}
}
//写蛋疼
function DrawText(text,x,y)
{
context.font = "40pt Arial";
context.fillText(text, x, y);
}
作者：Louja
椭圆与椭圆运动：
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次
$awa IT (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);
}
作者：Louja
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5 椭圆（蛋）运动的小球 全部内容，希望文章能够帮你解决 html5教程-HTML5 椭圆（蛋）运动的小球 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5 椭圆（蛋）运动的小球的详细内容...