绘制行星环绕动画，让网页动起来

前端

2022-12-09 11:12:47

遨游宇宙，畅享行星环绕动画的魅力

体验太空奇观

浩瀚的宇宙中，恒星闪耀，行星围绕着它们旋转，呈现出一幅美轮美奂的景象。如今，我们可以在网页上重现这一奇观，通过巧妙运用 canvas、javascript 和 HTML，轻松绘制出行星环绕动画，带你领略太空的无限魅力。

踏上创作之旅：掌握必备工具

1. canvas：你的虚拟画布

想象一下一个空白的画布，你可以用它来创作任何你想要的东西。canvas 就是这样一个 HTML5 元素，它允许你在网页上绘制图形和动画。有了它，你可以在你的虚拟画布上尽情发挥创造力。

2. javascript：动画的指挥官

javascript 是一种编程语言，可以让你控制网页元素，实现各种动态效果。它就像一个指挥官，指挥着你的行星环绕恒星旋转。

3. HTML：网页的骨架

HTML 是网页的基础框架，它定义了网页的布局和内容。它与 javascript 携手合作，让你创建出丰富多彩的网页效果。

绘制行星环绕动画：分步指南

1. 搭建网页框架：为动画奠定基础

首先，创建一个 HTML 文件，并添加以下结构：

<!DOCTYPE html>
<html>
<head>
  <script src="script.js"></script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>

2. 编写 javascript 代码：让行星动起来

在 <head> 标签中添加一个 <script> 标签，并在其中写入以下代码：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 定义行星参数
const planets = [
  {
    x: 100,
    y: 100,
    radius: 10,
    color: "red",
  },
  {
    x: 200,
    y: 100,
    radius: 15,
    color: "blue",
  },
  {
    x: 300,
    y: 100,
    radius: 20,
    color: "green",
  },
];

// 定义恒星参数
const star = {
  x: 250,
  y: 100,
  radius: 30,
  color: "yellow",
};

// 绘制行星
function drawPlanets() {
  for (let i = 0; i < planets.length; i++) {
    const planet = planets[i];
    ctx.beginPath();
    ctx.fillStyle = planet.color;
    ctx.arc(planet.x, planet.y, planet.radius, 0, 2 * Math.PI);
    ctx.fill();
  }
}

// 绘制恒星
function drawStar() {
  ctx.beginPath();
  ctx.fillStyle = star.color;
  ctx.arc(star.x, star.y, star.radius, 0, 2 * Math.PI);
  ctx.fill();
}

// 清除画布
function clearCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// 旋转行星
function rotatePlanets() {
  for (let i = 0; i < planets.length; i++) {
    const planet = planets[i];
    planet.x += Math.cos(planet.angle) * planet.speed;
    planet.y += Math.sin(planet.angle) * planet.speed;
    planet.angle += 0.01;
  }
}

// 动画循环：让行星永不停歇
function animate() {
  clearCanvas();
  drawStar();
  drawPlanets();
  rotatePlanets();
  requestAnimationFrame(animate);
}

// 启动动画：点亮太空
animate();