HTML5 Canvas轻松入门：绘制与动画制作实用教程

HTML5 Canvas 是一个强大的绘图API，它允许你直接在网页上绘制图形、图像和动画。无论是简单的绘图还是复杂的动画，Canvas都能满足你的需求。本文将带你轻松入门HTML5 Canvas，学习如何绘制图形和制作动画。

一、Canvas的基本使用

1.1 创建Canvas元素

首先，你需要在HTML文件中创建一个<canvas>元素。这个元素需要一个id属性，以便在JavaScript中引用。

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

1.2 获取Canvas上下文

在JavaScript中，你需要使用getElementById()方法获取<canvas>元素，然后通过.getContext('2d')方法获取2D绘图上下文。

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

1.3 绘制图形

Canvas提供了丰富的绘图方法，如fillRect(), strokeRect(), arc(), fillArc()等。以下是一些示例：

// 绘制矩形
ctx.fillRect(10, 10, 50, 50);

// 绘制线条
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(60, 60);
ctx.stroke();

// 绘制圆形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();

二、动画制作

2.1 使用requestAnimationFrame()

requestAnimationFrame()方法可以让浏览器在下一次重绘之前调用指定的回调函数更新动画。这是制作Canvas动画的关键。

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
  // ... 绘制图形
  requestAnimationFrame(animate); // 递归调用
}
animate();

2.2 动画示例：移动的矩形

以下是一个简单的移动矩形动画示例：

var rectX = 10;
var rectY = 10;
var rectWidth = 50;
var rectHeight = 50;
var dx = 2; // 移动速度
var dy = 2;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillRect(rectX, rectY, rectWidth, rectHeight);
  rectX += dx;
  rectY += dy;
  if (rectX + rectWidth > canvas.width || rectX < 0) {
    dx = -dx;
  }
  if (rectY + rectHeight > canvas.height || rectY < 0) {
    dy = -dy;
  }
  requestAnimationFrame(animate);
}
animate();

三、总结

通过本文的学习，你应该已经掌握了HTML5 Canvas的基本使用方法和动画制作技巧。希望这些知识能帮助你创作出精美的网页动画。记住，多加练习和实践，你将会成为Canvas高手！