HTML5 之 太阳-地球-月亮
<!DOCTYPE html><html lang="en" xmlns="http://www.
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas width="800" height="600" style="background-color:#000;" id="em"></canvas>
<script>
var time = 0;
function earth() {
var gc = document.getElementById('em').getContext('2d'), grad = null;
gc.clearRect(0, 0, 800, 600);
//绘制地球轨道
gc.beginPath();
gc.arc(400, 300, 220, 0, 360);
gc.closePath();
gc.strokeStyle = 'rgb(100,100,100)';
gc.stroke();
//绘制太阳
gc.beginPath();
gc.arc(400, 300, 40, 0, 360);
gc.closePath();
grad = gc.createRadialGradient(400, 300, 0, 400, 300, 35);
grad.addColorStop(0, 'rgb(255,0,0)');
grad.addColorStop(1, 'rgb(255,153,0)');
gc.fillStyle = grad;
gc.fill();
//绘制地球
gc.save();
gc.translate(400, 300);
gc.rotate(time * 360 / 365.25 * Math.PI / 180);
gc.beginPath();
gc.arc(0, -220, 15, 0, 360);
gc.closePath();
grad = gc.createRadialGradient(0, -220, 0, 0, -220, 15);
grad.addColorStop(0, 'rgb(120,193,248)');
grad.addColorStop(1, 'rgb(5,13,18)');
gc.fillStyle = grad;
gc.fill();
//月球轨道
gc.beginPath();
gc.arc(0, -220, 50, 0, 360);
gc.closePath();
gc.stroke();
//绘制月球
gc.save();
gc.translate(0, -220);
gc.rotate(time * 360 / 27.3 * Math.PI / 180);
gc.beginPath();
gc.arc(0, -50, 5, 0, 360);
gc.closePath();
grad = gc.createRadialGradient(0, -50, 0, 0, -50, 5);
grad.addColorStop(0, 'rgb(255,255,255)');
grad.addColorStop(1, 'rgb(150,150,150)');
gc.fillStyle = grad;
gc.fill();
gc.restore();
gc.restore();
time += 0.25;
}
earth();
setInterval(earth, 25);
</script>
</body>
</html>
