Canvas 动画教程

Canvas 是 HTML5 中用于绘制图形和动画的一个强大工具。本教程将带你一步步学习如何使用 Canvas 实现动画效果。

基础概念

在开始之前，我们需要了解一些基础概念：

• Canvas 元素：<canvas> 是一个矩形画布，我们可以使用 JavaScript 在它上面绘制图形。
• 上下文（Context）：Canvas 上下文是用于绘制图形的接口，我们可以通过它来绘制线条、形状、文本等。

创建动画

要创建动画，我们需要重复绘制图形，并更新它们的属性，使其看起来像是在移动。

步骤 1：创建 Canvas 元素

首先，我们需要在 HTML 中创建一个 Canvas 元素。

<canvas id="myCanvas" width="200" height="100"></canvas>

步骤 2：获取 Canvas 上下文

接下来，我们需要获取 Canvas 的上下文，以便进行绘制。

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

步骤 3：绘制图形

现在，我们可以使用 Canvas 上下文绘制图形。以下是一个绘制圆形的例子：

ctx.beginPath();
ctx.arc(100, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill();

步骤 4：更新图形

为了创建动画，我们需要不断更新图形的位置。以下是一个简单的动画示例：

let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, 50, 40, 0, 2 * Math.PI);
  ctx.fillStyle = 'red';
  ctx.fill();
  x += 2;
  if (x > canvas.width) {
    x = 0;
  }
  requestAnimationFrame(animate);
}

animate();

在上面的代码中，我们使用 requestAnimationFrame 函数来请求浏览器在下次重绘之前调用 animate 函数。

扩展阅读

想要了解更多关于 Canvas 的知识，可以阅读以下教程：

• Canvas 教程
• Canvas 动画进阶

希望这个教程能帮助你入门 Canvas 动画！🎉