为什么Canvas生成的重复Pattern无法完整铺满整个画布

错误点梳理 #

• 高度赋值错误：代码中const bh = canvas.width;错将高度赋值为画布宽度，应该改为const bh = canvas.height;
• 画布尺寸修改时机错误：先读取了原画布宽高赋值给bw/bh，随后又修改画布的width/height属性，修改画布宽高会清空原有内容，且后续绘制用的还是修改前的尺寸，导致图案绘制区域和画布实际尺寸不匹配
• 描边颜色无效：config中的strokeStyle值为#00000，仅5位十六进制字符，不符合颜色规范，应该改为6位的#000000，否则浏览器会识别为无效颜色，看不到描边
• 未执行填充绘制：仅给目标画布上下文设置了fillStyle为生成的pattern，没有调用填充方法（如fillRect），自然看不到图案效果

注意：单个图案画布的尺寸建议设置为gridSize的整数倍，避免重复拼接时出现边缘错位、缝隙问题。

修正后代码 #

图案生成函数 #

function CrossTemplate(gridOptions, canvas) {
  const config = {color: '#000000', gridSize: 4, gridPadding: 0, strokeStyle: "#000000"};
  const p = config.gridPadding;
  // 自定义单个pattern的尺寸，建议为gridSize的整数倍
  const patternSize = 20;
  const cw = patternSize + p * 2 + 1;
  const ch = patternSize + p * 2 + 1;

  const context = canvas.getContext('2d');
  // 先修改画布尺寸再绘制
  canvas.height = ch;
  canvas.width = cw;

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

  for (let x = 0; x <= patternSize; x += config.gridSize) {
    context.moveTo(0.5 + x + p, p);
    context.lineTo(0.5 + x + p, patternSize + p);
  }

  for (let x = 0; x <= patternSize; x += config.gridSize) {
    context.moveTo(p, 0.5 + x + p);
    context.lineTo(patternSize + p, 0.5 + x + p);
  }

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

  return canvas;
}

目标画布调用代码 #

// 先生成pattern画布
const patternCanvas = document.createElement('canvas');
CrossTemplate({}, patternCanvas);
// 目标画布绘制填充
const context2 = canvas2.getContext('2d');
context2.fillStyle = context2.createPattern(patternCanvas, 'repeat');
// 必须调用填充方法才会将图案渲染到画布上
context2.fillRect(0, 0, canvas2.width, canvas2.height);

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