Canvas背景图奇数比例缩放右侧出现白线问题排查

核心原因拆解 #

• 尺寸舍入导致覆盖偏差
  你的缩放逻辑中，画布尺寸通过Math.round(this.zoomWidthRef * zoomlevel)取整计算，但背景图的最终显示尺寸是zoomWidthRef * zoomlevel（未做取整处理）。当缩放比例为奇数百分比（如5%、7%）时，zoomWidthRef * zoomlevel很容易得到非整数结果（比如原画布宽度为奇数时，0.05×奇数=xx.05），取整后的画布尺寸会和背景图实际覆盖尺寸产生1px的偏差。如果画布背景为透明（或父元素背景是白色），这1px的空白就会显示为右侧的白线；而画布尺寸为偶数时，zoomWidthRef * zoomlevel多为整数，偏差自然消失。

• 背景图与画布缩放逻辑不匹配
  背景图是基于原画布尺寸（zoomWidthRef）计算scaleFactor完成缩放的，之后画布再应用zoomlevel缩放，背景图的最终显示宽度为zoomWidthRef * zoomlevel。但你手动将画布像素尺寸设置为取整后的值，导致背景图无法完全覆盖画布，边缘露出空白区域。

• 亚像素渲染精度问题
  浏览器对Canvas的非整数坐标/尺寸会进行抗锯齿渲染，当背景图边缘和画布边缘存在亚像素偏差时，会出现细微缝隙。这类缝隙在奇数缩放比例下更容易显现，因为这类比例更容易产生非整数的尺寸计算结果，放大后就会变成明显的白线。

验证方法 #

1. 临时将画布背景色改为红色，若白线变为红色，即可确认是画布背景露出导致的问题；
2. 打印zoomWidthRef * zoomlevel和Math.round(zoomWidthRef * zoomlevel)的计算值，对比两者的差异，就能直观看到舍入带来的偏差。

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