JavaScript Canvas绘制复杂图形：路径、模块化与可配置实践

<canvas id="view" width="500" height="180" style="border: 1px solid red"></canvas>

const ctx = document.getElementById('view').getContext('2d');

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();

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();