1. 介绍
使用Canvas绘制一个地球绕太阳转，月球绕地球转的简单太阳系。
2. 运行效果
3. 代码思路
- 将太阳和地球轨道作为背景绘制，一直保持不变。
- 首先确定地球的位置并将画布基点移动到地球坐标上。移动画布基点的代码：
ctx.translate(Math.cos(angle)*250,Math.sin(angle)*250)其中angle表示每次地球旋转的角度。 - 然后绘制月球轨道和月球位置。月球每次移动角度是地球的两倍。
- 最后通过
setInterval()函数不断循环执行下去。
4. 完整源码
代码内有详解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太阳系</title>
<style>
*{margin:0;padding:0;}
body{background-color: #000;overflow: hidden;}
canvas{
display:block;
margin: -180px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width='1000' height='1000'></canvas>
<script>
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
//绘制背景
function drawBackground(){
ctx.strokeStyle = "#fff";
//地球轨道
ctx.beginPath();
ctx.arc(500,500,250,0,2*Math.PI,false);
ctx.stroke();
//太阳
ctx.beginPath();
ctx.arc(500,500,50,0,2*Math.PI,false);
ctx.fillStyle="yellow";
ctx.fill();
ctx.stroke();
ctx.closePath();
}
//初始状态
//太阳坐标（500，500），太阳半径50
//地球轨道中心坐标（500，500），地球轨道半径250
//地球半径20，地球坐标（750，500）
//月球轨道中心坐标（750，500），月球轨道半径100
//月球半径10，月球坐标（650，500）
var cycle=365,time=0;
function drawAll(){
ctx.clearRect(0,0,c.width,c.height );
drawBackground();
var angle=time*(360/cycle)*Math.PI/180; //Math.PI/180表示1度
ctx.save();
ctx.translate(500,500);
ctx.rotate(angle);
//改变画布基点为地球坐标
ctx.translate(Math.cos(angle)*250,Math.sin(angle)*250);
ctx.rotate(-2*angle); //2倍于地球公转角度，便于看出月球的公转。可根据自己需要另作修改。
//画地球
ctx.beginPath();
ctx.arc(0,0,20,0,2*Math.PI,false);
ctx.fillStyle="blue";
ctx.fill();
ctx.stroke();
ctx.closePath();
//画月球轨道，以地球为圆心
ctx.beginPath();
ctx.arc(0,0,100,0,2*Math.PI,false);
ctx.stroke();
ctx.closePath();
//画月球
ctx.beginPath();
ctx.arc(-100,0,10,0,2*Math.PI,false);
ctx.fillStyle="#F6F6F6";
ctx.fill();
ctx.stroke();
ctx.closePath();
ctx.restore();
time++; //角度会随时间增加
}
setInterval(drawAll,30); //添加定时器，每30ms执行一次
</script>
</body>
</html>
