掌握HTML5 Canvas，轻松创作精彩动画！入门教程与实战案例详解

HTML5 Canvas 是一种非常强大的技术，允许你使用 JavaScript 在网页上绘制图形和动画。无论是简单的图形绘制还是复杂的游戏开发，Canvas 都能提供强大的支持。下面，我们将详细介绍如何入门 HTML5 Canvas，并分享一些实战案例。

HTML5 Canvas 基础知识

什么是 Canvas？

Canvas 是 HTML5 中新增的一个元素，它提供了一个可以在网页上绘制图形的容器。使用 JavaScript，你可以在这个容器中绘制各种图形、图像和动画。

Canvas 的基本用法

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

在上面的代码中，我们创建了一个宽度为 200 像素，高度为 100 像素的 Canvas，并给它添加了一个黑色的边框。

Canvas 的上下文（Context）

在 Canvas 中，我们通过获取上下文来绘制图形。以下是如何获取 2D 上下文的示例：

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

现在，ctx 对象可以用来绘制各种图形，例如矩形、圆形、文本等。

HTML5 Canvas 动画入门

动画的基本原理

动画的本质是连续播放一系列静态图像。在 Canvas 中，我们可以通过不断地绘制新的图像并清除旧的图像来实现动画效果。

使用 requestAnimationFrame 实现动画

requestAnimationFrame 是一个浏览器 API，它可以让浏览器在下次重绘之前调用指定的回调函数。这是实现 Canvas 动画的一种常用方法。

以下是一个简单的例子：

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制图形的代码
  requestAnimationFrame(animate);
}

animate();

在上面的代码中，我们首先清除了 Canvas，然后绘制了新的图形，并使用 requestAnimationFrame 来调用 animate 函数，从而实现连续的动画效果。

实战案例详解

案例 1：绘制一个简单的球动画

在这个案例中，我们将创建一个球，并在 Canvas 上实现其滚动效果。

var ball = {
  x: 100,
  y: 100,
  radius: 20,
  dx: 2,
  dy: 2
};

function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  ball.x += ball.dx;
  ball.y += ball.dy;

  if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
    ball.dx = -ball.dx;
  }

  if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
    ball.dy = -ball.dy;
  }

  requestAnimationFrame(animate);
}

animate();

在上面的代码中，我们定义了一个球对象，并通过 animate 函数来绘制和移动球。当球碰到 Canvas 的边缘时，它会反向移动。

案例 2：实现一个简单的弹跳球游戏

在这个案例中，我们将创建一个弹跳球游戏，玩家需要控制球撞击障碍物来得分。

var ball = {
  x: canvas.width / 2,
  y: canvas.height - 30,
  radius: 10,
  dx: 5,
  dy: -5
};

var paddle = {
  x: (canvas.width - 75) / 2,
  y: canvas.height - 10,
  width: 75,
  height: 10
};

var rightPressed = false;
var leftPressed = false;

function drawBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

function drawPaddle() {
  ctx.beginPath();
  ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height);
  ctx.fillStyle = '#0095DD';
  ctx.fill();
  ctx.closePath();
}

function collision(b, p) {
  p.left = p.x;
  p.right = p.x + p.width;
  p.top = p.y;
  p.bottom = p.y + p.height;

  b.left = b.x - b.radius;
  b.right = b.x + b.radius;
  b.top = b.y - b.radius;
  b.bottom = b.y + b.radius;

  return p.left < b.right && p.top < b.bottom && p.right > b.left && p.bottom > b.top;
}

document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);

function keyDownHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = true;
  }
  else if (e.keyCode == 37) {
    leftPressed = true;
  }
}

function keyUpHandler(e) {
  if (e.keyCode == 39) {
    rightPressed = false;
  }
  else if (e.keyCode == 37) {
    leftPressed = false;
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawBall();
  drawPaddle();

  if (rightPressed && paddle.x < canvas.width - paddle.width) {
    paddle.x += 7;
  }

  if (leftPressed && paddle.x > 0) {
    paddle.x -= 7;
  }

  var collision = collision(ball, paddle);

  if (collision) {
    ball.dy = -ball.dy;
  }

  ball.x += ball.dx;
  ball.y += ball.dy;

  if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
    ball.dx = -ball.dx;
  }

  if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
    ball.dy = -ball.dy;
  }

  requestAnimationFrame(draw);
}

draw();

在上面的代码中，我们创建了一个球和一个 paddle，并通过按键来控制 paddle 的移动。当球撞击 paddle 时，球会弹回，并改变方向。

总结

通过本文的介绍，相信你已经对 HTML5 Canvas 有了初步的了解。Canvas 是一种非常强大的技术，可以帮助你创作出各种精彩动画。在实际开发中，你可以根据自己的需求，不断探索和尝试新的动画效果。

希望本文对你有所帮助，祝你在 HTML5 Canvas 的道路上越走越远！