HTML5 之 太阳系2，这次连卫星都有了
<!DOCTYPE html><html lang="en" xmlns="http://www.
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas width="1600" height="1600" style="background-color:#000;" id="em"></canvas>
<script>
var time = 0, span = 50, gc = document.getElementById('em').getContext('2d'), x = 800, y = 800;
//行星参数，days公转周期，incolor渐变内色，outcolor渐变外色，orbit轨道半径，planet行星半径，start起始位置（弧度）
var planets = [
{
days: 87.7, incolor: 'rgb(166,150,151)', outcolor: 'rgb(93,62,64)', orbit: 65, planet: 3, start: 0,
moon: []
}, {
days: 224.7, incolor: 'rgb(196,187,172)', outcolor: 'rgb(31,19,21)', orbit: 90, planet: 4, start: 0,
moon: []
}, {
days: 365.24, incolor: 'rgb(120,177,232)', outcolor: 'rgb(5,12,18)', orbit: 130, planet: 5, start: 0,
moon: [
{ days: 27.3, color: 'rgb(200, 200, 200)', orbit: 10, r: 2, start: 0 }
]
}, {
days: 686.98, incolor: 'rgb(206,201,182)', outcolor: 'rgb(118,66,45)', orbit: 180, planet: 3, start: 0,
moon: []
}, {
days: 4332.59, incolor: 'rgb(192,164,143)', outcolor: 'rgb(50,34,34)', orbit: 300, planet: 15, start: 0,
moon: [
{ days: 1.77, color: 'rgb(200, 200, 200)', orbit: 20, r: 2, start: 0 },
{ days: 3.55, color: 'rgb(100, 132, 76)', orbit: 30, r: 2, start: 0 },
{ days: 7.15, color: 'rgb(45, 213, 95)', orbit: 40, r: 2, start: 0 },
{ days: 16.69, color: 'rgb(156, 30, 247)', orbit: 50, r: 2, start: 0 }
]
}, {
days: 10759.5, incolor: 'rgb(247,249,227)', outcolor: 'rgb(92,69,51)', orbit: 450, planet: 12, start: 0,
moon: [
{ days: 1.88, color: 'rgb(156, 30, 247)', orbit: 17, r: 2, start: 0 },
{ days: 2.74, color: 'rgb(200, 200, 200)', orbit: 27, r: 2, start: 0 },
{ days: 4.51, color: 'rgb(100, 132, 76)', orbit: 37, r: 2, start: 0 },
{ days: 15.95, color: 'rgb(45, 213, 95)', orbit: 47, r: 2, start: 0 },
{ days: 79.33, color: 'rgb(250, 6, 14)', orbit: 57, r: 2, start: 0 }
]
}, {
days: 30799.1, incolor: 'rgb(167,225,228)', outcolor: 'rgb(25,36,58)', orbit: 600, planet: 10, start: 0,
moon: [
{ days: 4.14, color: 'rgb(156, 30, 247)', orbit: 17, r: 2, start: 0 },
{ days: 8.71, color: 'rgb(200, 200, 200)', orbit: 27, r: 2, start: 0 },
{ days: 13.46, color: 'rgb(100, 132, 76)', orbit: 37, r: 2, start: 0 }
]
}, {
days: 60152, incolor: 'rgb(6,97,178)', outcolor: 'rgb(30,59,115)', orbit: 750, planet: 9, start: 0,
moon: [
{ days: 5.88, color: 'rgb(200, 200, 200)', orbit: 15, r: 2, start: 0 }
]
}
];
function drawSun() {
//绘制太阳
gc.beginPath();
gc.arc(x, y, 40, 0, 2 * Math.PI);
gc.closePath();
grad = gc.createRadialGradient(x, y, 0, x, y, 35);
grad.addColorStop(0, 'rgb(255,0,0)');
grad.addColorStop(1, 'rgb(255,153,0)');
gc.fillStyle = grad;
gc.fill();
for (var i = 0, len = planets.length; i < len; i++) {
drawPlanet(i);
}
};
function drawPlanet(i) {
var grad = null, pl = planets[i];
if (pl.start == 0) {
pl.start = Math.floor(Math.random() * 360);
}
//绘制行星轨道
gc.beginPath();
gc.arc(x, y, pl.orbit, 0, 2 * Math.PI);
gc.closePath();
gc.strokeStyle = 'rgba(50,50,50,0.5)';
gc.stroke();
//绘制行星
gc.save();
gc.translate(x, y);
gc.rotate((time * 360 / pl.days + pl.start) * Math.PI / 180);
gc.beginPath();
gc.arc(0, -pl.orbit, pl.planet, 0, 2 * Math.PI);
gc.closePath();
grad = gc.createRadialGradient(0, -pl.orbit, 0, 0, -pl.orbit, pl.planet);
grad.addColorStop(0, pl.incolor);
grad.addColorStop(1, pl.outcolor);
gc.fillStyle = grad;
gc.fill();
for (var j = 0, leg = pl.moon.length; j < leg; j++) {
drowMoon(pl, j);
}
gc.restore();
};
function drowMoon(pl, j) {
var sl = pl.moon[j];
if (sl.start == 0) {
sl.start = Math.floor(Math.random() * 360);
}
//月球轨道
gc.beginPath();
gc.arc(0, -pl.orbit, sl.orbit, 0, 2 * Math.PI);
gc.closePath();
gc.stroke();
//绘制月球
gc.save();
gc.translate(0, -pl.orbit);
gc.rotate((time * 360 / sl.days + sl.start) * Math.PI / 180);
gc.beginPath();
gc.arc(0, -sl.orbit, sl.r, 0, 2 * Math.PI);
gc.closePath();
gc.fillStyle = sl.color;
gc.fill();
gc.restore();
};
function drawSolar() {
gc.clearRect(0, 0, 1600, 1600);
drawSun();
time += span / 1000;
}
setInterval(drawSolar, 25);
</script>
</body>
</html>
[ 本帖最后由 冰镇柠檬汁儿 于 2015-5-30 09:52 编辑 ]
