您的位置：首页 > Web前端 > HTML5
html5动画基础（canvas,太阳系）

2015-10-23 10:30 453 查看
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
window.onload = function(){
//获取canvas元素,并获取2d绘图环境
var cxt=document.getElementById('canvas').getContext('2d');

//轨道
function drawTrack(){
for(var i=0;i<8;i++){
cxt.beginPath();
cxt.arc(500,500,(i+1)*50,0,360,false);
cxt.closePath();
//设置笔触颜色
cxt.strokeStyle='#fff';
cxt.stroke();
}
}
drawTrack();
//星球
function Star(x,y,radius,cycle,scolor,ecolor){
//画出星球需要哪些属性
//星球的坐标
this.x=x;
this.y=y;
//星球的半径
this.radius=radius;
//公转周期
this.cycle=cycle;
//星球的颜色（开始色和结束色）
this.scolor=scolor;
this.ecolor=ecolor;
//新建一个渐变颜色空对象
this.color=null;
//设置一个计时器
this.time=0;
this.draw=function(){
//保存之前的画布内容
cxt.save();
//重置原点
cxt.translate(500,500);
//设置旋转角度(角度*math.PI/180)
cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);
//画星球
cxt.beginPath();
cxt.arc(this.x,this.y,this.radius,0,360,false);
cxt.closePath();
//设置星球的填充颜色
//新建渐变对象
this.color = cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
//设置渐变效果
this.color.addColorStop(0,this.scolor);//渐变开始点
this.color.addColorStop(1,this.ecolor);//渐变结束点
cxt.fillStyle=this.color;
cxt.fill();//填充星球

//恢复之前保存的画布内容
cxt.restore();

//执行完毕之后时间增加
this.time+=1;
}
}

//创建一个太阳对象的构造函数
function Sun(){
Star.call(this,0,0,20,0,'#f00','#f90');
}

//创建一个水星对象的构造方法
function Mercury(){
Star.call(this,0,-50,10,87.70,'#a69697','#5c3e40');
}

//创建一个金星对象的构造方法
function Venus(){
Star.call(this,0,-100,10,244.701,'#c4bbac','#1f1315');
}

//创建一个地球对象的构造方法
function Earth(){
Star.call(this,0,-150,10,365.224,'#78b1e8','#050c12');
}

//创建一个火星对象的构造方法
function Mars(){
Star.call(this,0,-200,10,686.98,'#cec9b6','#76422d');
}

//创建一个木星对象的构造方法
function Jupiter(){
Star.call(this,0,-250,10,4332.589,'#c0a48e','#322222');
}

//创建一个土星对象的构造方法
function Saturn(){
Star.call(this,0,-300,10,10759.5,'#f7f9e3','#5c4533');
}

//创建一个天王星对象的构造方法
function Uranus(){
Star.call(this,0,-350,10,30799.095,'#a7e1e5','#19243a');
}

//创建一个天王星对象的构造方法
function Neptune(){
Star.call(this,0,-400,10,60152,'#0661b2','#1e3873');
}

var sun=new Sun();
var water=new Mercury();
var jinxing=new Venus();
var diqiu=new Earth();
var huoxing=new Mars();
var muxing=new Jupiter();
var tuxing=new Saturn();
var tianwangxing=new Uranus();
var haiwangxing=new Neptune();

function move(){
//清除画布
cxt.clearRect(0,0,1000,1000);
//画出轨道
drawTrack();
//画出每个星球
sun.draw();
water.draw();
jinxing.draw();
diqiu.draw();
huoxing.draw();
muxing.draw();
tuxing.draw();
tianwangxing.draw();
haiwangxing.draw();
}
//使各星球运转
setInterval(move,15);
};
</script>
<style></style>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000">您的浏览器不支持canvas元素</canvas>
</body>
</html>
运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航