Canvas长圆角矩形clip操作导致底部内容截断问题排查

问题原因 #

你遇到的这个问题，核心是Canvas路径的浮点精度限制。当绘制超大尺寸（比如高度超过18000px）的弧线路径时，浏览器的Canvas渲染引擎在计算路径坐标时会出现精度丢失——弧线路径的坐标计算依赖三角函数，大尺寸下的浮点误差会逐渐累积，导致裁剪路径的底部无法正确闭合，最终出现内容截断、底部空白的情况。

而rect()是浏览器原生优化的矩形路径，内部针对大尺寸场景做了特殊处理，所以不会出现这类精度问题。

解决方案 #

方案1：优化圆角矩形路径的绘制逻辑

你的drawRoundRectPath函数的路径绘制顺序和闭合方式存在瑕疵，调整为更规范的顺时针绘制顺序，并确保路径正确闭合，能有效减少精度误差累积：

drawRoundRectPath(width: number, height: number, radius: number) {
  // 先限制圆角半径，避免超过矩形尺寸的一半导致路径异常
  radius = Math.min(radius, Math.min(width, height)/2);
  
  // 从左上角圆角的右侧起点开始绘制
  this.ctx.moveTo(radius, 0);
  // 顶部直线到右上角圆角左侧
  this.ctx.lineTo(width - radius, 0);
  // 绘制右上角圆角
  this.ctx.arc(width - radius, radius, radius, 3 * Math.PI/2, 0);
  // 右侧直线到右下角圆角顶部
  this.ctx.lineTo(width, height - radius);
  // 绘制右下角圆角
  this.ctx.arc(width - radius, height - radius, radius, 0, Math.PI/2);
  // 底部直线到左下角圆角右侧
  this.ctx.lineTo(radius, height);
  // 绘制左下角圆角
  this.ctx.arc(radius, height - radius, radius, Math.PI/2, Math.PI);
  // 左侧直线到左上角圆角底部
  this.ctx.lineTo(0, radius);
  // 绘制左上角圆角
  this.ctx.arc(radius, radius, radius, Math.PI, 3 * Math.PI/2);
  
  // 自动闭合路径，确保起点和终点完全衔接
  this.ctx.closePath();
}

这种绘制顺序更符合Canvas路径的渲染逻辑，每一段路径都精准衔接，能最大程度降低大尺寸下的精度误差。

方案2：用混合模式替代路径裁剪（更稳定的大尺寸方案）

如果优化路径后仍有问题，可以避开clip()的路径精度限制，改用globalCompositeOperation实现类似裁剪的效果：

drawClipContent(
  x: number, y: number, width: number, height: number, radius?: number, contentFn?: Function
) {
  this.ctx.save();
  
  // 先绘制一个圆角矩形作为蒙版
  this.ctx.beginPath();
  // 修改drawRoundRectPath，直接基于坐标绘制
  this.drawRoundRectPath(x, y, width, height, radius);
  this.ctx.fill(); // 填充颜色不影响，后续混合模式会控制显示范围
  
  // 设置混合模式：后续绘制的内容只会显示在已填充的蒙版区域内
  this.ctx.globalCompositeOperation = 'source-in';
  
  if (contentFn) {
    contentFn();
  }
  
  // 恢复默认混合模式和上下文状态
  this.ctx.globalCompositeOperation = 'source-over';
  this.ctx.restore();
}

// 修改后的drawRoundRectPath，支持直接指定坐标
drawRoundRectPath(x: number, y: number, width: number, height: number, radius: number) {
  radius = Math.min(radius, Math.min(width, height)/2);
  
  this.ctx.moveTo(x + radius, y);
  this.ctx.lineTo(x + width - radius, y);
  this.ctx.arc(x + width - radius, y + radius, radius, 3 * Math.PI/2, 0);
  this.ctx.lineTo(x + width, y + height - radius);
  this.ctx.arc(x + width - radius, y + height - radius, radius, 0, Math.PI/2);
  this.ctx.lineTo(x + radius, y + height);
  this.ctx.arc(x + radius, y + height - radius, radius, Math.PI/2, Math.PI);
  this.ctx.lineTo(x, y + radius);
  this.ctx.arc(x + radius, y + radius, radius, Math.PI, 3 * Math.PI/2);
  this.ctx.closePath();
}

这种方式利用浏览器对填充图形的稳定处理逻辑，避开了路径裁剪的精度问题，适合极端大尺寸的场景。

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