canvas 绘制太阳系行星运转动画的简单实现

前端

2023-10-21 17:12:33

输入

canvas-简单的动画

输出

正文

canvas 是 HTML5 中的一个元素，用于在网页上绘制图形。它提供了许多强大的功能，可以用来创建各种各样的动画效果。

太阳系行星运转动画是一个经典的动画效果，也是一个很好的例子来展示 canvas 的功能。

实现步骤

首先，我们需要创建一个 canvas 元素并将其添加到 HTML 文档中。
然后，我们需要创建一个 JavaScript 文件并将其链接到 HTML 文档。
在 JavaScript 文件中，我们需要先定义一些变量来存储太阳系行星的属性，包括行星的名称、半径、轨道半径、轨道速度和旋转速度。
接下来，我们需要创建一个函数来绘制太阳系行星。这个函数应该使用 canvas 的绘图方法来绘制太阳系行星。
最后，我们需要调用 requestAnimationFrame 函数来启动动画。requestAnimationFrame 函数会不断调用我们的绘制函数，从而实现流畅的动画效果。

实例代码

// 定义太阳系行星的属性
const planets = [
  {
    name: "太阳",
    radius: 695000,
    orbitalRadius: 0,
    orbitalSpeed: 0,
    rotationSpeed: 0.000019,
  },
  {
    name: "水星",
    radius: 2440,
    orbitalRadius: 57900000,
    orbitalSpeed: 47.4,
    rotationSpeed: 0.00012,
  },
  {
    name: "金星",
    radius: 6052,
    orbitalRadius: 108200000,
    orbitalSpeed: 35.0,
    rotationSpeed: -0.000004,
  },
  {
    name: "地球",
    radius: 6378,
    orbitalRadius: 149600000,
    orbitalSpeed: 29.8,
    rotationSpeed: 0.000073,
  },
  {
    name: "火星",
    radius: 3396,
    orbitalRadius: 227900000,
    orbitalSpeed: 24.1,
    rotationSpeed: 0.000037,
  },
  {
    name: "木星",
    radius: 71492,
    orbitalRadius: 778600000,
    orbitalSpeed: 13.1,
    rotationSpeed: 0.000045,
  },
  {
    name: "土星",
    radius: 60268,
    orbitalRadius: 1433500000,
    orbitalSpeed: 9.6,
    rotationSpeed: 0.000034,
  },
  {
    name: "天王星",
    radius: 25559,
    orbitalRadius: 2877000000,
    orbitalSpeed: 6.8,
    rotationSpeed: -0.000011,
  },
  {
    name: "海王星",
    radius: 24764,
    orbitalRadius: 4504000000,
    orbitalSpeed: 5.4,
    rotationSpeed: 0.000009,
  },
];

// 创建 canvas 元素并将其添加到 HTML 文档中
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);

// 设置 canvas 的宽度和高度
canvas.width = 800;
canvas.height = 600;

// 获取 canvas 的上下文
const ctx = canvas.getContext("2d");

// 创建一个函数来绘制太阳系行星
const drawPlanets = () => {
  // 清除 canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制太阳
  ctx.beginPath();
  ctx.arc(canvas.width / 2, canvas.height / 2, planets[0].radius, 0, 2 * Math.PI);
  ctx.fillStyle = "yellow";
  ctx.fill();

  // 绘制其他行星
  for (let i = 1; i < planets.length; i++) {
    const planet = planets[i];

    // 计算行星的位置
    const x = canvas.width / 2 + planet.orbitalRadius * Math.cos(planet.orbitalSpeed * time);
    const y = canvas.height / 2 + planet.orbitalRadius * Math.sin(planet.orbitalSpeed * time);

    // 绘制行星
    ctx.beginPath();
    ctx.arc(x, y, planet.radius, 0, 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();

    // 绘制行星的轨道
    ctx.beginPath();
    ctx.arc(canvas.width / 2, canvas.height / 2, planet.orbitalRadius, 0, 2 * Math.PI);
    ctx.strokeStyle = "white";
    ctx.stroke();
  }
};

// 创建一个函数来旋转太阳系行星
const rotatePlanets = () => {
  for (let i = 1; i < planets.length; i++) {
    const planet = planets[i];

    // 计算行星的旋转角度
    const angle = planet.rotationSpeed * time;

    // 旋转行星
    ctx.save();
    ctx.translate(canvas.width / 2 + planet.orbitalRadius * Math.cos(planet.orbitalSpeed * time),
        canvas.height / 2 + planet.orbitalRadius * Math.sin(planet.orbitalSpeed * time));
    ctx.rotate(angle);
    ctx.drawImage(planet.image, -planet.radius, -planet.radius, planet.radius * 2, planet.radius * 2);
    ctx.restore();
  }
};

// 创建一个变量来存储当前时间
let time = 0;

// 调用 requestAnimationFrame 函数来启动动画
const animate = () => {
  requestAnimationFrame(animate);

  // 更新时间
  time += 0.01;

  // 绘制太阳系行星
  drawPlanets();

  // 旋转太阳系行星
  rotatePlanets();
};

animate();