为什么Canvas网格绘制函数会出现双线效果？哪里存在计算错误？

存在的错误点 #

• 变量赋值笔误：高度变量bh错误赋值为canvas.width，应该改为canvas.height，横纵边界计算错误直接导致网格绘制错位叠线
• 宽高读取顺序错误：先读取了原始canvas的宽高，后续又修改了canvas的宽高属性，绘图用的边界值和实际画布尺寸不匹配
• 配置项未生效：硬编码了const p = 0，没有使用配置中传入的gridPadding参数
• 绘制边界计算错误：画布扩展了1px的空间，但循环终止条件用了原始宽高，导致边缘线重复绘制

修正后的代码 #

const defaultConfig: GridOptions = { color: '#000000', gridSize: 4, gridPadding: 0, strokeStyle: '#000000' };

export function CrossTemplate(
  gridOptions: Partial<GridOptions> = defaultConfig,
  canvas: HTMLCanvasElement,
): HTMLCanvasElement {
  const config = { ...defaultConfig, ...gridOptions };
  // 先存储原始画布宽高
  const originWidth = canvas.width;
  const originHeight = canvas.height;
  const p = config.gridPadding;
  // 计算调整后的画布尺寸
  const cw = originWidth + p * 2 + 1;
  const ch = originHeight + p * 2 + 1;

  const context = canvas.getContext('2d');
  // 先修改画布宽高（该操作会自动清空画布），再确认绘图边界
  canvas.height = ch;
  canvas.width = cw;
  const bw = originWidth;
  const bh = originHeight;

  if (!context) throw Error('Canvas context error');

  // 绘制竖线
  for (let x = 0; x <= bw; x += config.gridSize) {
    context.moveTo(0.5 + x + p, p);
    context.lineTo(0.5 + x + p, bh + p);
  }

  // 绘制横线
  for (let x = 0; x <= bh; x += config.gridSize) {
    context.moveTo(p, 0.5 + x + p);
    context.lineTo(bw + p, 0.5 + x + p);
  }

  context.strokeStyle = config.strokeStyle;
  context.stroke();

  return canvas;
}

原理说明 #

Canvas的1px线默认对齐像素格的中间点，如果坐标为整数，线条会占两个像素格的各一半，看起来变粗甚至出现双线，你加0.5偏移的逻辑本身是正确的，只是因为之前的尺寸计算错误，导致两条线的位置过于接近，才会呈现出双线效果，修正尺寸计算逻辑后即可恢复正常的单网格线效果。

内容的提问来源于stack exchange，提问作者user15361861