Canvas路径绘图基础
在html5 canvas中，我们通过一系列路径指令来绘制图形。核心思想是“画笔”从一个点移动到另一个点，并在此过程中“描绘”出路径。完成所有路径的定义后，再通过描边（stroke()）或填充（fill()）将其渲染到画布上。
首先，我们需要一个HTML
const ctx = document.getElementById('view').getContext('2d');Canvas路径绘制的基本步骤包括：
- ctx.beginPath(): 开始一个新的路径。这是非常关键的一步，它会清除之前的路径，确保你绘制的是一个独立的图形。
- ctx.moveTo(x, y): 将画笔移动到指定坐标 (x, y)，不绘制任何线条。这是路径的起始点。
-
路径指令:
- ctx.lineTo(x, y): 从当前点绘制一条直线到 (x, y)。
- ctx.quadraticCurveTo(cx, cy, x, y): 绘制一条二次贝塞尔曲线。(cx, cy) 是控制点，(x, y) 是终点。
- ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y): 绘制一条三次贝塞尔曲线。(cx1, cy1) 和 (cx2, cy2) 是两个控制点，(x, y) 是终点。
- ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise): 绘制圆弧。
- ctx.stroke() 或 ctx.fill(): 渲染路径。stroke() 描边，fill() 填充。
构建可复用图形：函数化与坐标管理
直接使用固定坐标绘制复杂图形会导致代码难以维护和复用。更好的做法是将绘图逻辑封装到一个函数中，并传入 x、y 参数作为图形的起始或参考点。这样，你就可以在画布的任何位置绘制相同的图形。
核心优化点：
立即学习“Java免费学习笔记（深入）”；
- 函数封装: 将绘制水壶的所有Canvas API调用放入一个 drawJug(ctx, x, y) 函数中。
- 相对坐标: 函数内部的所有坐标都应相对于传入的 x 和 y 参数，例如 x + 50, y - 40。
- ctx.beginPath() 的重要性: 每次绘制一个新图形实例时，务必调用 ctx.beginPath() 来开始一个新的路径，避免与之前绘制的路径混淆。
- ctx.stroke() 渲染: 在所有路径段定义完成后，调用 ctx.stroke() 将图形绘制出来。
- ctx.translate(0.5, 0.5) 提升清晰度: Canvas在绘制1像素宽的线条时，如果线条坐标不是整数，可能会出现模糊。通过 ctx.translate(0.5, 0.5) 可以将整个画布的坐标系平移0.5个像素，使线条中心对齐到物理像素网格，从而获得更清晰的线条。
- 注释组织代码: 对于复杂图形，为每个组成部分添加注释，提高代码可读性。
- moveTo() 的正确使用: moveTo() 用于在一个路径中开始一个新的子路径。例如，绘制水壶的把手和壶身是独立的形状，但它们都属于同一个水壶，可以在同一个 beginPath() 和 stroke() 调用之间通过 moveTo() 来切换。但要确保 moveTo 的目标点是正确的相对位置。
以下是改进后的水壶绘制函数示例：
const ctx = document.getElementById('view').getContext('2d');
// 主函数，设置画布并调用绘图函数
const main = () => {
// 像素对齐，使线条更清晰
ctx.translate(0.5, 0.5);
// 清空画布并设置背景色
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 绘制不同颜色的水壶
ctx.strokeStyle = 'hsl(0, 100%, 75%)'; // 红色
drawJug(ctx, 50, 40);
ctx.strokeStyle = 'hsl(120, 100%, 75%)'; // 绿色
drawJug(ctx, 200, 40);
ctx.strokeStyle = 'hsl(180, 100%, 75%)'; // 青色
drawJug(ctx, 350, 40);
};
// 绘制水壶的函数，x, y 为水壶左上角的起始坐标
const drawJug = (ctx, x, y) => {
ctx.beginPath(); // 开始新路径
// 壶口部分
ctx.moveTo(x, y); // 左上角起点
ctx.quadraticCurveTo(x + 50, y - 40, x + 100, y); // 壶口上弧
ctx.quadraticCurveTo(x + 50, y + 40, x, y); // 壶口下弧，闭合壶口
// 壶身左侧
ctx.bezierCurveTo(x + 10, y + 50, x - 10, y + 60, x, y + 100);
// 壶身右侧 (注意这里的 moveTo，它从壶口右上角开始绘制右侧)
// 原问题中的一个关键点是这里的 moveTo 坐标不正确，导致右侧连接不上
ctx.moveTo(x + 100, y);
ctx.bezierCurveTo(x + 70, y + 50, x + 110, y + 40, x + 105, y + 100);
// 壶底
ctx.quadraticCurveTo(x + 52.5, y + 140, x, y + 100); // 闭合壶身
// 把手
ctx.moveTo(x, y + 65); // 把手起点
ctx.arc(x, y + 40, 25, 0.5 * Math.PI, 1.55 * Math.PI); // 绘制把手弧线
// 壶内液体曲线
ctx.moveTo(x, y + 50); // 液体起点
ctx.quadraticCurveTo(x + 52.5, y + 20, x + 95, y + 50); // 液体上弧
ctx.quadraticCurveTo(x + 52.5, y + 70, x, y + 50); // 液体下弧，闭合液体形状
ctx.stroke(); // 描边绘制所有路径
};
main();提升灵活性：参数化与配置选项
为了让图形更加灵活，我们可以引入更多的参数，例如 width 和 height 来控制图形的整体尺寸。更进一步，可以使用一个 options 对象来管理图形的各个可配置细节，如壶口大小、壶底弧度、液体高度、把手半径等。这种方式极大地提高了组件的复用性和可定制性。
const ctx = document.getElementById('view').getContext('2d');
const main = () => {
ctx.translate(0.5, 0.5);
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 绘制第一个水壶，自定义选项
ctx.strokeStyle = 'hsl(0, 100%, 75%)';
drawJug(ctx, 50, 40, 100, 100, {
mouth: 40, // 壶口弧度
bottom: 40, // 壶底弧度
water: 20, // 液体弧度
handleRadius: 25 // 把手半径
});
// 绘制第二个水壶，不同尺寸和选项
ctx.strokeStyle = 'hsl(120, 100%, 75%)';
drawJug(ctx, 200, 50, 100, 80, {
mouth: 30,
bottom: 40,
water: 15,
handleRadius: 25
});
// 绘制第三个水壶，不同尺寸和选项
ctx.strokeStyle = 'hsl(180, 100%, 75%)';
drawJug(ctx, 350, 40, 80, 100, {
mouth: 20,
bottom: 30,
water: 20,
handleRadius: 25
});
};
// 默认配置选项，用于合并用户传入的选项
const defaultOptions = {
mouth: 0,
bottom: 0,
water: 0,
handleRadius: 0
};
// 绘制水壶的函数，支持宽度、高度和自定义选项
const drawJug = (ctx, x, y, width, height, options) => {
// 合并默认选项和用户传入的选项
const opts = { ...defaultOptions, ...options };
ctx.beginPath(); // 开始新路径
// 壶口部分
ctx.moveTo(x, y);
ctx.quadraticCurveTo(x + (width / 2), y - opts.mouth, x + width, y); // 壶口上弧
ctx.quadraticCurveTo(x + (width / 2), y + opts.mouth, x, y); // 壶口下弧
// 壶身左侧
ctx.bezierCurveTo(x + 10, y + (height / 2), x - 10, y + (height / 2) + 10, x, y + height);
// 壶身右侧
ctx.moveTo(x + width, y); // 移动到壶口右侧起点
ctx.bezierCurveTo(x + (width / 2) + 20, y + (height / 2), x + width + 10, y + (height / 2) - 10, x + width + 5, y + height);
// 壶底
ctx.quadraticCurveTo(x + (width / 2) + 2.5, y + height + opts.bottom, x, y + height);
// 把手
ctx.moveTo(x, y + (height / 2) + (opts.handleRadius / 2));
ctx.arc(x, y + (height / 2) - 10, opts.handleRadius, 0.5 * Math.PI, 1.55 * Math.PI);
// 壶内液体曲线
ctx.moveTo(x, y + (height / 2));
ctx.quadraticCurveTo(x + (width / 2) + 2.5, y + (height / 2) - opts.water, x + width - 5, y + (height / 2));
ctx.quadraticCurveTo(x + (width / 2) + 2.5, y + (height / 2) + opts.water, x, y + (height / 2));
ctx.stroke(); // 描边绘制
};
main();Canvas绘图最佳实践与注意事项
- 路径隔离: 始终在绘制新图形或独立路径前调用 ctx.beginPath()。如果忘记，后续的绘制指令会连接到之前的路径上，导致意想不到的结果。
- 渲染指令: 路径的定义只是“描述”了形状，必须调用 ctx.stroke()（描边）或 ctx.fill()（填充）才能将其渲染到画布上。
- 坐标系理解: Canvas的坐标原点 (0, 0) 位于画布的左上角，X轴向右增加，Y轴向下增加。在设计图形时，应基于这个坐标系进行计算。
- 调试技巧: 对于复杂的路径，如果绘制结果不符合预期，可以尝试在关键点使用 ctx.arc() 绘制小圆点，或使用 ctx.lineTo() 绘制临时直线来辅助定位问题。
- 性能考量: 避免在动画循环中频繁创建新的Canvas上下文或进行昂贵的像素操作。对于静态图形，一次性绘制即可。
总结
通过本教程，我们学习了如何在JavaScript Canvas中绘制复杂图形，特别是如何利用 quadraticCurveTo 和 bezierCurveTo 来创建平滑曲线。更重要的是，我们掌握了将绘图逻辑封装为可复用函数的方法，并通过参数化和配置选项来提升图形的灵活性和可定制性。遵循 beginPath()、moveTo() 和 stroke() 等核心API的最佳实践，将帮助你构建出结构清晰、易于维护的Canvas应用。掌握这些技巧，你将能够创建各种复杂且富有表现力的动态图形。
