用 Canvas 实现奔跑的长颈鹿：动手绘制生动动画

2024-12-09 20:52:35

在网页开发中，Canvas 是一个强大的工具，能够让我们通过 JavaScript 动态绘制图形和动画。在这篇文章中，我们将通过实现一个简单的动画：奔跑的长颈鹿，来展示 Canvas 的应用，尤其是在制作动画时的技巧。

一、Canvas 简介

Canvas 是 HTML5 中新增的一个元素，允许在网页中进行图形绘制和动画渲染。使用 <canvas> 标签时，可以通过 JavaScript 操控其 API 绘制 2D 图形、路径、文本，甚至创建动画。

基本语法：

<canvas id="myCanvas" width="800" height="600"></canvas>

Canvas 元素本身并不显示任何内容，开发者需要通过 JavaScript 绘制图形和处理动画。通过获取 Canvas 的 2d 上下文（getContext('2d')），我们可以开始在其上绘制和操作。

二、如何绘制奔跑的长颈鹿？

我们将实现一个简单的奔跑的长颈鹿动画，长颈鹿将不断地在屏幕上移动。为了简化问题，本文采用一个简单的图形作为长颈鹿的代表——通过多个简单的矩形和圆形来绘制。

1. 绘制长颈鹿的身体和四肢

首先，我们需要绘制长颈鹿的基本形状：长颈鹿的身体、脖子和四肢。为了简单起见，长颈鹿的身体可以用矩形表示，脖子和四肢则使用不同的形状组合。

绘制长颈鹿身体、脖子和四肢的代码：

function drawGiraffe(ctx, x, y) {
  // 身体
  ctx.fillStyle = '#FFD700';
  ctx.fillRect(x, y, 100, 50);
  
  // 脖子
  ctx.fillRect(x + 35, y - 100, 30, 100);

  // 头部
  ctx.beginPath();
  ctx.arc(x + 50, y - 120, 20, 0, Math.PI * 2, true);
  ctx.fillStyle = '#FFD700';
  ctx.fill();
  ctx.closePath();

  // 四肢
  ctx.fillRect(x + 15, y + 50, 15, 50); // 前左腿
  ctx.fillRect(x + 70, y + 50, 15, 50); // 前右腿
  ctx.fillRect(x + 15, y + 100, 15, 50); // 后左腿
  ctx.fillRect(x + 70, y + 100, 15, 50); // 后右腿
}

在上面的代码中，我们使用了 fillRect() 和 arc() 来绘制长颈鹿的身体、脖子、头部和四肢。身体是一个矩形，脖子是一个竖直的矩形，头部是一个圆形，四肢也是矩形。

2. 绘制长颈鹿的动作（奔跑）

为了让长颈鹿看起来像在奔跑，我们可以通过改变长颈鹿的位置、腿部的状态来模拟它的动作。通常，我们可以通过修改四肢的位置和形状来呈现奔跑的动作。

我们将四肢的“移动”分为两种状态，前后腿交替运动，从而实现奔跑的效果。

实现奔跑动画：

function drawRunningGiraffe(ctx, x, y, frame) {
  // 身体
  ctx.fillStyle = '#FFD700';
  ctx.fillRect(x, y, 100, 50);
  
  // 脖子
  ctx.fillRect(x + 35, y - 100, 30, 100);

  // 头部
  ctx.beginPath();
  ctx.arc(x + 50, y - 120, 20, 0, Math.PI * 2, true);
  ctx.fillStyle = '#FFD700';
  ctx.fill();
  ctx.closePath();

  // 动态四肢
  if (frame % 2 === 0) {
    // 假设此时是"前左腿抬起"
    ctx.fillRect(x + 15, y + 50, 15, 50); // 前左腿
    ctx.fillRect(x + 70, y + 50, 15, 50); // 前右腿
    ctx.fillRect(x + 15, y + 100, 15, 50); // 后左腿
    ctx.fillRect(x + 70, y + 100, 15, 50); // 后右腿
  } else {
    // 假设此时是"后左腿抬起"
    ctx.fillRect(x + 15, y + 50, 15, 50); // 前左腿
    ctx.fillRect(x + 70, y + 50, 15, 50); // 前右腿
    ctx.fillRect(x + 15, y + 100, 15, 40); // 后左腿抬起
    ctx.fillRect(x + 70, y + 100, 15, 40); // 后右腿抬起
  }
}

3. 动画循环

为了让动画持续进行，我们需要不断地更新长颈鹿的位置和状态。在每一帧中，我们将清除之前的图形，然后重新绘制长颈鹿，并使其向右移动。为此，我们可以使用 requestAnimationFrame 来实现平滑的动画循环。

动画循环代码：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 300;  // 长颈鹿的起始位置
let frame = 0; // 用于切换四肢运动的状态

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除上一帧的图形

  // 绘制长颈鹿并让它向右移动
  drawRunningGiraffe(ctx, x, y, frame);

  // 更新位置和状态
  x += 2; // 长颈鹿向右移动
  frame++; // 增加帧数
  if (x > canvas.width) x = -100; // 如果跑出画布，重置位置
  
  requestAnimationFrame(animate); // 循环调用动画
}

animate(); // 启动动画

4. 完整的 HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>奔跑的长颈鹿</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      background-color: #87CEEB; /* 天空蓝背景 */
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>
  <script>
    // 在这里粘贴之前的JavaScript代码
  </script>
</body>
</html>

通过使用 Canvas，我们可以轻松实现复杂的动画效果。在本例中，我们通过简单的矩形和圆形，绘制了一个简单的奔跑的长颈鹿。借助 requestAnimationFrame，我们实现了动画的平滑过渡，确保了长颈鹿不断地在屏幕上奔跑。

关键点回顾：

使用 Canvas 绘制基本形状：矩形、圆形等。
使用 requestAnimationFrame 实现流畅的动画效果。
使用简单的循环和条件判断控制长颈鹿的四肢动态，模拟奔跑动作。

通过这些基本技巧，你可以开始探索更多的动画效果，比如绘制更复杂的图形、加入背景、添加声音等，创造更加生动有趣的 Web 动画！

码农公寓