HTML5的Canvas画图模拟太阳系周转
日期：2014-05-16 浏览次数：20984 次
HTML5的Canvas画图模拟太阳系运转
今天研究的是利用HTML5的Cnavas画图来模拟太阳系运转，首先，在这个太阳系里分为画轨道和画星球两个部分，对
于每一个星球我们要知道它的颜色和公转周期，如下图。
采用面向对象编程的思想，代码如下：
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000">
你的浏览器不支持canvas标签！
</canvas>
<script>
//设置2d绘图环境
var ctx = document.getElementById("canvas").getContext("2d");
//画轨道
function drawTrack(){
for(var i=0;i<8;i++){
ctx.beginPath();
ctx.arc(500,500,(i+1)*50,0,360,false);
ctx.closePath();
ctx.strokeStyle = "#fff";
ctx.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(){
//保存之前的内容
ctx.save();
//重置0，0坐标
ctx.translate(500,500);
//旋转角度
ctx.rotate(this.time*(360/this.cycle)*Math.PI/180);
//画星球
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,360,false);
ctx.closePath();
//设置星球的填充颜色
this.color = ctx.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);
this.color.addColorStop(0,this.sColor);
this.color.addColorStop(1,this.eColor);
ctx.fillStyle = this.color;
ctx.fill();
//恢复之前画布的内容
ctx.restore();
this.time += 1;
}
}
//创建一个太阳的构造函数
function Sun(){
Star.call(this,0,0,20,0,"#FFFF00","#FF9900");
}
//创建一个水星的构造函数
function Mercury(){
Star.call(this,0,-50,10,87.70,"#A69697","#5C3E40");
}
//创建一个金星的构造函数
function Venus(){
Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");
}
//创建一个地球的构造函数
function Earth(){
Star.call(this,0,-150,10,365.2422,"#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","#1E3B73");
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
