本教程深入探讨如何利用JavaScript canvas API绘制复杂且可复用的图形，以绘制一个水壶为例。文章详细介绍了通过函数封装实现图形的模块化和位置无关性，强调了路径管理（如beginPath()）的重要性，并进一步展示了如何引入配置选项以实现图形的灵活定制，从而提升代码的可维护性和复用性。
Canvas 路径绘制基础
html5 canvas 元素提供了强大的2d绘图能力，其中路径绘制是构建复杂图形的核心。通过一系列指令，我们可以在画布上定义线条、曲线和形状。理解以下基本方法是绘制复杂图形的关键：
- ctx.beginPath(): 开启一个新路径。这是至关重要的一步，它会重置当前路径，确保每次绘制的图形都是独立的，避免不同图形路径之间的意外连接。
- ctx.moveTo(x, y): 将笔触移动到指定坐标 (x, y)，不绘制任何线条。它定义了新路径的起始点。
- ctx.lineTo(x, y): 从当前笔触位置到指定坐标 (x, y) 绘制一条直线。
- ctx.quadraticCurveTo(cp1x, cp1y, x, y): 绘制一条二次贝塞尔曲线。cp1x, cp1y 是控制点，x, y 是曲线的终点。
- ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): 绘制一条三次贝塞尔曲线。cp1x, cp1y 和 cp2x, cp2y 是两个控制点，x, y 是曲线的终点。三次贝塞尔曲线提供了更大的灵活性来控制曲线的形状。
- ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise): 绘制圆弧。x, y 是圆心，radius 是半径，startAngle 和 endAngle 定义了圆弧的起始和结束角度（以弧度表示），counterclockwise 为 true 表示逆时针绘制。
- ctx.stroke(): 沿着当前路径绘制轮廓线。
- ctx.fill(): 填充当前路径形成的区域。
模块化绘图：封装 drawJug 函数
在Canvas上绘制复杂图形时，如果所有绘图指令都堆积在一起，代码会变得难以阅读、维护和复用。尤其当我们需要在不同位置绘制多个相同或相似的图形时，这种问题会更加突出。
解决方案是将绘制特定图形（如水壶）的逻辑封装到一个独立的函数中。这个函数接受 Canvas 2D 渲染上下文 ctx 以及图形的起始坐标 (x, y) 作为参数。通过使用相对坐标（即所有绘图指令的坐标都基于 x 和 y 进行计算），我们可以实现图形的位置无关性，使其可以在画布上的任何位置绘制。
ctx.beginPath() 的重要性： 在 drawJug 函数内部，每次绘制之前调用 ctx.beginPath() 是一个关键的最佳实践。它确保了每次 drawJug 调用都会开始一个新的独立路径，避免了不同水壶之间或水壶与背景之间产生不必要的连接线。
示例代码：基础版 drawJug 函数
以下代码展示了如何封装一个 drawJug 函数，并在 main 函数中调用它来绘制多个不同颜色的水壶。
HTML 结构 (index.html)
立即学习“Java免费学习笔记（深入）”；
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas 绘制水壶</title> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; /* 防止滚动条 */ } body { display: flex; align-items: center; justify-content: center; background: #222; /* 深色背景 */ } </style> </head> <body> <canvas id="view" width="500" height="180" style="border: 1px solid red;"></canvas> <script src="script.JS"></script> </body> </html>
JavaScript 代码 (script.js)
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); }; /** * 绘制一个水壶形状 * @param {CanvasRenderingContext2D} ctx - Canvas 2D 渲染上下文 * @param {number} x - 水壶的起始X坐标 (左上角) * @param {number} y - 水壶的起始Y坐标 (左上角) */ const drawJug = (ctx, x, y) => { ctx.beginPath(); // 开始新路径，确保每次绘制独立 // 1. 壶口上沿：从 (x, y) 开始，向右上方弯曲 ctx.moveTo(x, y); ctx.quadraticCurveTo(x +
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
