Canvas部分路径不显示：基于百分比变量计算的路径为何消失？

核心原因 #

1. 零面积或无效路径：当百分比计算后的坐标因精度处理（如toFixed(2)截断）导致路径点重合、共线，形成的闭合区域面积为0时，Canvas的fill()操作会因无有效区域而不渲染。比如你提供的position=0时的路径，若计算后三个点共线，就会出现这种情况。

2. 子像素渲染与像素对齐问题：Canvas对整数坐标和子像素坐标的渲染逻辑不同。当路径坐标刚好落在像素边界，或线段宽度小于1（如你的outline厚度0.5），反锯齿机制可能导致路径被淡化或完全隐藏。

3. 精度丢失的累积偏差：decimal函数用toFixed(2)强制保留两位小数，会截断原始浮点计算值，累积的精度偏差可能导致路径形状变形，甚至变成无效路径。

解决方案 #

1. 优化精度处理逻辑 #

移除过度的精度截断，改用更合理的精度保留方式：

// 替换原decimal函数，保留更多小数位减少精度丢失
decimal(number, precision = 6) {
  return +number.toFixed(precision);
}
// 或者对齐到最近像素，避免子像素问题
decimal(number) {
  return Math.round(number);
}

2. 确保路径形成有效闭合区域 #

在填充前校验路径有效性，避免渲染零面积区域：

async drawPolygon(entity) {
  const data = entity.data,
    path = await this.retrieveValue(data.path || [], entity),  
    { width, height, left, top } = this.calculateSizeAndPos(entity),
    x = this.decimal(this.picture.x + left),
    y = this.decimal(this.picture.y + top);

  this.ctx.save();
  this.ctx.beginPath();
  this.ctx.moveTo(x, y);
  const points = [[x, y]];

  path.forEach(point => {
    if (point[0] === 'line') {
      const lineX = this.decimal(x + this.calc(point[1], 'x'));
      const lineY = this.decimal(y + this.calc(point[2], 'y'));
      points.push([lineX, lineY]);
      this.ctx.lineTo(lineX, lineY);
    } else {
      this.polygonFunction(x, y, point[0])(...point.slice(1));
    }
  });

  // 检查是否为有效区域（至少3个不共线的点）
  if (points.length >= 3 && !this.arePointsCollinear(points)) {
    this.ctx.closePath();
    this.ctx.fillStyle = this.fill(data.fill) || this.ctx.fillStyle;
    this.ctx.fill();
  }

  if (entity.custom) {
    entity.custom(this.ctx);
  }

  if (entity.outline) {
    const outline = entity.outline;
    this.polygonFunction(x, y, 'stroke')(this.thickness(outline.thickness || 5), this.fill(outline.fill || '#000'));
  }

  this.ctx.restore();
}

// 辅助函数：判断点是否共线
arePointsCollinear(points) {
  const [x0, y0] = points[0];
  const [x1, y1] = points[1];
  const dx = x1 - x0;
  const dy = y1 - y0;
  for (let i = 2; i < points.length; i++) {
    const [xi, yi] = points[i];
    if (dx * (yi - y0) !== dy * (xi - x0)) return false;
  }
  return true;
}

3. 调整Canvas渲染设置 #

显式配置图像平滑，并对细线条做像素中心对齐：

// 在setCanvas中添加
this.ctx.imageSmoothingEnabled = true;
this.ctx.imageSmoothingQuality = 'high';

// 修改polygonFunction中的line方法
line: (lineX, lineY,) => {
  lineX = x + this.calc(lineX, 'x');
  lineY = y + this.calc(lineY, 'y');
  // 对齐到像素中心，避免边界渲染问题
  lineX = Math.round(lineX) + 0.5;
  lineY = Math.round(lineY) + 0.5;
  this.ctx.lineTo(lineX, lineY);
},

4. 显式闭合路径 #

调整fill()的调用顺序，先闭合路径再填充：

// 在drawPolygon中修改路径处理逻辑
this.ctx.beginPath();
this.ctx.moveTo(x, y);
path.forEach(point => {
  this.polygonFunction(x, y, point[0])(...point.slice(1));
});
this.ctx.closePath(); // 先闭合路径
this.ctx.fillStyle = this.fill(data.fill) || this.ctx.fillStyle;
this.ctx.fill(); // 再执行填充

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