使用JavaScript Canvas绘制可重用且可配置的复杂图形教程-js教程-PHP中文网

使用JavaScript Canvas绘制可重用且可配置的复杂图形教程

霞舞

发布： 2025-08-20 11:10:31

原创

986人浏览过

使用JavaScript Canvas绘制可重用且可配置的复杂图形教程

本教程详细讲解如何利用JavaScript Canvas API绘制复杂图形，以水壶为例，演示了路径绘制、模块化函数设计、坐标管理以及如何通过参数配置实现图形的动态调整。通过将绘图逻辑封装为可重用函数，并引入尺寸和样式选项，您可以高效地在Canvas上创建和管理多样化的自定义图形。

在web开发中，javascript canvas提供了一个强大的api，用于在网页上进行图形绘制。然而，当需要绘制复杂或重复出现的图形时，如何组织代码、确保图形的可重用性和可配置性成为关键。本教程将以绘制一个水壶为例，逐步介绍如何优化canvas绘图代码，使其更具模块化、灵活性和可维护性。

Canvas路径绘制基础

在Canvas上绘制图形，核心在于定义路径。路径由一系列点和连接这些点的线段或曲线组成。以下是绘制复杂图形时常用的Canvas路径方法：

ctx.beginPath(): 开始一个新的路径。这是至关重要的一步，它会清空当前子路径，确保后续的绘制操作不会与之前的路径混淆。
ctx.moveTo(x, y): 将笔触移动到指定的 (x, y) 坐标，但不绘制线条。这通常是路径的起始点。
ctx.lineTo(x, y): 从当前点绘制一条直线到指定的 (x, y) 坐标。
ctx.quadraticCurveTo(cpx, cpy, x, y): 绘制一条二次贝塞尔曲线。cpx, cpy 是控制点，x, y 是结束点。
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y): 绘制一条三次贝塞尔曲线。cp1x, cp1y 和 cp2x, cp2y 是两个控制点，x, y 是结束点。
ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise): 绘制一个圆弧。
ctx.stroke(): 沿着当前路径绘制轮廓线。
ctx.fill(): 填充当前路径。

在绘制复杂图形时，合理使用这些方法并理解它们的参数至关重要。

模块化与坐标管理：绘制可重用水壶

最初的绘图尝试可能直接在全局作用域内定义一系列路径，导致代码难以理解和复用。一个常见的问题是，当需要绘制多个相同类型的图形时，需要手动调整每个点的坐标，这不仅效率低下，而且容易出错。例如，原始代码中 ctx.moveTo(205, 105) 这样的硬编码坐标，在图形需要移动时就会成为障碍。

为了解决这个问题，最佳实践是将绘图逻辑封装到一个函数中。这个函数应该接受Canvas上下文 ctx 和图形的起始 x, y 坐标作为参数。这样，所有内部的路径坐标都可以基于 x 和 y 进行相对计算，从而实现图形的自由定位。

立即学习“Java免费学习笔记（深入）”；

以下是一个基本的 drawJug 函数结构，它接收 ctx、x 和 y 作为参数，并在内部使用相对坐标绘制水壶的各个部分：

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

// 绘制水壶的函数
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);
  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();

登录后复制

HTML 结构:

<canvas id="view" width="500" height="180"></canvas>

登录后复制

CSS 样式 (可选，用于居中显示Canvas):

千帆大模型平台

面向企业开发者的一站式大模型开发及服务运行平台

查看详情

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222;
}

登录后复制

在这个改进版本中，所有的坐标都通过 x 和 y 偏移量来计算，使得 drawJug 函数可以在画布上的任何位置绘制水壶，大大提高了代码的重用性。

增强可配置性：绘制不同样式的水壶

为了进一步提升 drawJug 函数的灵活性，我们可以引入更多的参数来控制水壶的尺寸和样式，例如壶口大小、壶底形状、水面高度以及把手半径等。这可以通过在函数中添加 width、height 参数以及一个 options 对象来实现。

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

登录后复制

HTML 和 CSS 保持不变。

在这个高级版本中，width 和 height 参数控制了水壶的整体尺寸，而 options 对象则提供了更精细的控制，如壶口张开程度 (mouth)、壶底凸出程度 (bottom)、水面波浪高度 (water) 和把手大小 (handleRadius)。通过调整这些参数，可以轻松绘制出各种形态的水壶。

注意事项

ctx.beginPath() 的重要性: 每次绘制一个独立的图形或图形的一部分时，务必调用 ctx.beginPath()。这能确保新的路径不会与之前已绘制的路径合并，避免意外的连接线。
坐标系与像素对齐: Canvas的坐标系统是基于像素的。为了使线条更清晰，尤其是在绘制细线时，可以考虑使用 ctx.translate(0.5, 0.5)。这会将绘图原点移动半个像素，使线条能够更好地对齐到物理像素网格，减少模糊感。
代码注释: 对于复杂的路径绘制，添加详细的注释来描述每个 moveTo、lineTo 或曲线方法所绘制的图形部分，这能极大提高代码的可读性和可维护性。
性能: 对于需要频繁重绘或绘制大量复杂图形的场景，可以考虑使用离屏Canvas（OffscreenCanvas）或优化绘制逻辑，以提高性能。