HTML5 的 canvas 元素为网页带来了动态图形和动画的能力，无需任何插件即可在用户的浏览器中绘制图像。无论你是想创建游戏、数据可视化，还是简单的动画效果，掌握 canvas 的绘图流程都是基础中的基础。本文将引导你了解使用 canvas 进行绘图的基本步骤。
1. 准备画布
在开始绘制之前，首先需要在 HTML 页面中插入一个 canvas 元素。canvas 元素本质上是一个矩形区域，其宽度和高度可以通过属性直接设置，也可以通过 CSS 来调整。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 绘图示例</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script src="script.js"></script>
</body>
</html>
2. 获取上下文
canvas 元素本身并不具备绘图能力，它只是一块空白的画布。真正的绘图工作由所谓的“上下文”来完成。上下文是 canvas 提供的绘图环境，它包含了实际的绘图方法和属性。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
这里，getContext('2d') 方法获取了一个 2D 上下文对象，这是最常用的上下文类型，用于绘制二维图形。如果需要绘制三维图形，则可以使用 webgl 上下文，参考链接。
3. 设置样式
在 canvas 中绘图前，通常需要设置一些样式，比如线条颜色、填充颜色、线宽、字体等。这些样式决定了最终图形的外观。
ctx.strokeStyle = 'red'; // 设置线条颜色
ctx.fillStyle = 'blue'; // 设置填充颜色
ctx.lineWidth = 5; // 设置线条宽度
4. 开始绘图
一旦设置了样式，接下来就可以开始绘图了。canvas 提供了一系列的绘图方法，包括绘制路径、圆形、矩形、文字等。
<canvas> 只支持两种形式的图形绘制：矩形 和 路径（由一系列点连成的线段）。
4.1 绘制矩形
// 填充矩形
ctx.fillRect(50, 50, 100, 100);
// 绘制矩形边框
ctx.strokeRect(150, 50, 100, 100);
4.2 绘制圆形
const centerX = 300;
const centerY = 250;
const radius = 50;
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
ctx.stroke();
4.3 绘制文本
ctx.font = '30px Arial';
ctx.fillText('Hello, Canvas!', 10, 50);
4.4 绘制路径
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.stroke();
5. 清除画布
如果你需要重绘或清除部分画面，可以使用 clearRect 方法。此方法接受四个参数，分别是清除区域的左上角坐标以及宽度和高度。
ctx.clearRect(0, 0, canvas.width, canvas.height);
6. 实践与优化
虽然上述步骤足以让你开始使用 canvas 绘图，但在实际开发中，你可能还需要处理更复杂的场景，如动画、事件监听、性能优化等。此外，熟悉 canvas 的高级特性，如变换、阴影、渐变、模式等，将使你能够创作出更加丰富多彩的图形和动画。
canvas 的世界广阔无垠，从简单的图形到复杂的游戏和应用，都有其身影。希望这篇文章能为你打开一扇门，引领你探索 canvas 的无限可能！