16行js代码的旋转地球源码

以下是16行JavaScript代码实现旋转地球的源码：

var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var context = canvas.getContext('2d');
var radius = 150;
var angle = 0;

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
  context.stroke();
  context.save();
  context.translate(canvas.width / 2, canvas.height / 2);
  context.rotate(angle);
  context.beginPath();
  context.arc(radius, 0, 20, 0, 2 * Math.PI);
  context.fill();
  context.restore();
  angle += 0.05;
  requestAnimationFrame(draw);
}

draw();

解释：

1. 创建一个画布，并将其添加到文档中。
2. 获取画布的上下文。
3. 设置地球的半径和旋转角度。
4. 创建一个绘制函数，用于清除画布并绘制地球和旋转的球体。
5. 在绘制函数中，先清除画布。
6. 绘制地球，即一个半径为radius的圆。
7. 保存当前画布状态。
8. 平移画布至中心，旋转画布角度，然后绘制旋转的球体，即一个半径为20的圆。
9. 恢复画布状态。
10. 增加角度值，然后请求下一帧动画。
11. 调用绘制函数，实现旋转地球的效果。