html5椭圆搜索框代码,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

{

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值