轻松学会HTML5 Canvas动画制作：从基础入门到实战案例解析

HTML5 Canvas简介

HTML5 Canvas 是一种用于在网页上绘制图形的强大技术。它允许开发者使用 JavaScript 在网页上创建动态、交互式的图形和动画。Canvas 元素提供了丰富的绘图API，使得制作动画变得简单而有趣。

入门基础

1. Canvas 元素

在 HTML 中，使用 <canvas> 标签来创建一个画布。以下是一个简单的例子：

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

在这个例子中，我们创建了一个宽200像素、高100像素的画布，并给它添加了一个黑色边框。

2. 获取 Canvas 对象

使用 JavaScript，我们可以通过 getElementById 方法获取到 Canvas 元素，并使用 getContext 方法获取到绘图上下文：

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

3. 基本绘图命令

• fillRect(x, y, width, height)：绘制一个填充矩形。
• strokeRect(x, y, width, height)：绘制一个边框矩形。
• arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制一个圆弧。

动画制作

1. 使用 requestAnimationFrame

requestAnimationFrame 是一个浏览器API，用于请求浏览器在下次重绘之前调用指定的回调函数更新动画。这是一个制作动画的常用方法。

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

draw();

2. 移动对象

以下是一个简单的例子，演示如何让一个矩形在画布上移动：

var x = 0;
var y = 0;
var dx = 2;
var dy = 2;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(x, y, 50, 50);
  x += dx;
  y += dy;
  if (x + 50 > canvas.width || x < 0) {
    dx = -dx;
  }
  if (y + 50 > canvas.height || y < 0) {
    dy = -dy;
  }
  requestAnimationFrame(draw);
}

draw();

实战案例解析

1. 小球弹跳

以下是一个简单的例子，演示如何制作一个弹跳的小球：

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

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

  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;
  }
}

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

draw();

2. 简单游戏

以下是一个简单的例子，演示如何制作一个简单的猜数字游戏：

var secretNumber = Math.floor(Math.random() * 100) + 1;
var guess = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#000";
  ctx.font = "30px Arial";
  ctx.fillText("Guess the number: " + guess, 10, 50);
  ctx.fillText("Secret number: " + secretNumber, 10, 100);

  if (guess === secretNumber) {
    ctx.fillText("Congratulations! You guessed the right number!", 10, 150);
  } else if (guess < secretNumber) {
    ctx.fillText("Higher!", 10, 150);
  } else {
    ctx.fillText("Lower!", 10, 150);
  }

  guess++;
  requestAnimationFrame(draw);
}

draw();

总结

通过本文的学习，相信你已经对 HTML5 Canvas 动画制作有了初步的了解。从基础入门到实战案例解析，我们学习了如何使用 Canvas 元素、获取 Canvas 对象、基本绘图命令、使用 requestAnimationFrame 制作动画、移动对象以及一些实战案例。希望这些内容能帮助你更好地掌握 HTML5 Canvas 动画制作技术。