Canvas 是 HTML5 引入的一个强大的元素，它允许通过 JavaScript在网页上绘制图形、生成图像、动画等。作为前端开发工程师，理解 Canvas的基本用法是非常重要的。接下来通过一个详细的入门教程，帮助大家快速掌握 Canvas 的基本操作。
1. 创建 Canvas 元素
Canvas 是 HTML 中的一个 <canvas> 元素，你需要在 HTML 页面中插入这个元素，并为其指定宽度和高度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas 入门教程</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
<script src="script.js"></script>
</body>
</html>
在上面的代码中，我们创建了一个宽高为 500x500 像素的 Canvas，并给它加上了一个黑色边框。Canvas 元素的默认背景是透明的。
2. 获取 Canvas 上下文 (Context)
Canvas 元素本身并不直接显示图形，你需要通过 JavaScript 获取一个 绘图上下文（context），然后才能在 Canvas 上绘制图形。Canvas 提供了两种常用的上下文：
- 2D：用于绘制 2D 图形（例如矩形、圆形、线条等）。
- WebGL：用于绘制 3D 图形（我们先从 2D 开始学习）。
// 获取 Canvas 元素
const canvas = document.getElementById('myCanvas');
// 获取 2D 上下文
const ctx = canvas.getContext('2d');
getContext('2d') 返回的是一个用于绘制 2D 图形的绘图上下文对象，常常用变量 ctx 来表示它。
3. 绘制基本形状
绘制矩形
// 绘制填充矩形
ctx.fillStyle = "red"; // 设置填充颜色为红色
ctx.fillRect(50, 50, 200, 100); // 绘制一个矩形，位置(50, 50)，宽200，高100
// 绘制空心矩形
ctx.strokeStyle = "blue"; // 设置描边颜色为蓝色
ctx.lineWidth = 5; // 设置线条宽度
ctx.strokeRect(100, 100, 150, 75); // 绘制空心矩形
绘制圆形
// 绘制填充圆形
ctx.fillStyle = "green"; // 设置填充颜色为绿色
ctx.beginPath(); // 开始路径
ctx.arc(250, 250, 50, 0, 2 * Math.PI); // 绘制圆形，中心(250, 250)，半径50
ctx.fill(); // 填充圆形
// 绘制空心圆形
ctx.strokeStyle = "purple"; // 设置描边颜色为紫色
ctx.lineWidth = 3; // 设置线条宽度
ctx.beginPath();
ctx.arc(250, 250, 100, 0, 2 * Math.PI); // 绘制空心圆形
ctx.stroke(); // 描边圆形
绘制线条
// 绘制线条
ctx.beginPath(); // 开始路径
ctx.moveTo(50, 50); // 移动到起点
ctx.lineTo(450, 50); // 绘制到终点
ctx.lineWidth = 2; // 设置线条宽度
ctx.strokeStyle = "orange"; // 设置线条颜色
ctx.stroke(); // 描边线条
4. 文本绘制
Canvas 也支持文本绘制，你可以使用 fillText 或 strokeText 方法来绘制填充或描边文本。
// 设置文本样式
ctx.font = "30px Arial"; // 设置字体大小和字体
ctx.fillStyle = "black"; // 设置文本填充颜色
ctx.fillText("Hello, Canvas!", 100, 200); // 绘制文本
// 设置描边文本
ctx.strokeStyle = "red"; // 设置描边颜色
ctx.lineWidth = 2; // 设置线条宽度
ctx.strokeText("Hello, Canvas!", 100, 250); // 绘制描边文本
5. 清除画布
如果你想清除画布的某个区域或整个画布，可以使用 clearRect 方法。
// 清除一个矩形区域
ctx.clearRect(100, 100, 150, 75); // 清除一个区域，位置(100, 100)，宽150，高75
6. 组合图形
你可以通过组合基本形状和路径绘制更复杂的图形。例如，绘制一个自定义形状（如星形）：
ctx.beginPath();
ctx.moveTo(250, 50); // 起点
ctx.lineTo(300, 150);
ctx.lineTo(400, 150);
ctx.lineTo(325, 200);
ctx.lineTo(350, 300);
ctx.lineTo(250, 250);
ctx.lineTo(150, 300);
ctx.lineTo(175, 200);
ctx.lineTo(100, 150);
ctx.lineTo(200, 150);
ctx.closePath(); // 关闭路径，形成闭环
ctx.fillStyle = "yellow"; // 填充颜色
ctx.fill(); // 填充星形
7. 动画效果
你还可以使用 requestAnimationFrame 来创建流畅的动画效果。这里展示一个简单的动画：
let x = 50; // 初始位置
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除整个画布
ctx.beginPath();
ctx.arc(x, 250, 20, 0, 2 * Math.PI); // 绘制圆形
ctx.fillStyle = "blue";
ctx.fill(); // 填充圆形
x += 2; // 每次更新位置
if (x > canvas.width) {
x = 0; // 当圆形超出画布宽度时重置位置
}
requestAnimationFrame(draw); // 再次请求下一帧
}
draw(); // 启动动画
总结
以上介绍了 HTML5 Canvas 的基础知识，包括如何创建 Canvas 元素、获取绘图上下文以及绘制基本形状、文本和实现动画。Canvas 是一个非常灵活的工具，适合用于图像处理、游戏开发、数据可视化等各种应用场景。掌握这些基础后，你可以继续探索更多复杂的应用，比如图像滤镜、路径操作、复杂动画等。
