js 地球旋转动画效果

在JavaScript中创建地球旋转动画效果，通常会使用HTML5 Canvas、WebGL或CSS3。这里我们以Canvas为例来说明：

1. HTML部分：首先，你需要一个圆形元素作为地球的视图容器：

<canvas id="earth-canvas" width="400" height="400"></canvas>

2. CSS部分：添加一些样式来隐藏默认的边框和圆角，让地球看起来更像球体：

#earth-canvas {
  border: none;
  cursor: pointer;
  background-color: #fff;
}

3. JavaScript部分（使用Canvas API）：

const canvas = document.getElementById('earth-canvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = Math.min(canvas.width, canvas.height) / 2 - 10;
let angle = 0;

function drawEarth() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius, angle, angle + 2 * Math.PI, false);
  // 可以选择不同的纹理或颜色来模拟地球表面的纹路
  ctx.fillStyle = 'rgba(0, 128, 0, 0.5)';
  ctx.fill();

  angle += 0.01; // 更新角度，每一步增加一点点
  requestAnimationFrame(drawEarth); // 持续更新直到停止
}

drawEarth();

这个例子是一个简单的地球旋转动画，实际上你可以通过引入经纬度数据，并根据不同的经度绘制不同的区域，来制作出更为复杂的地图旋转效果。