HTML5 椭圆(蛋)运动的小球
2011-12-07 11:57 LoujaDy 阅读(841) 评论(0) 编辑 收藏 举报
椭圆与椭圆运动:
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);
}
//角度
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);
}
作者:Louja
出处:http://loujady.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此声明,且在文章页面给出原文连接,否则保留追究法律责任的权利。