HTML/JS Canvas图形间出现白线的原因及解决方法

数据老陈

2026-8-6

Safari Canvas相邻图形出现白线问题（Chrome正常）

我在MacBook Pro上用JS/TS开发基于HTML5 Canvas的游戏，在Safari浏览器中相邻图形之间会出现意外白线，但相同代码在Chrome中运行完全正常。渲染代码如下：

CONTEXT.drawImage(
    CACHES.get(this.materialURL),
    (this.rect.x - camera.location.x) * GRID_W,
    (this.rect.y - camera.location.y) * GRID_H,
    GRID_W,
    GRID_H,
);

问题原因

Safari的Canvas渲染引擎在处理非整数坐标的绘制操作时，会启用亚像素抗锯齿机制，导致相邻图形的边缘产生半透明间隙，视觉上呈现为白线。Chrome的渲染逻辑在这类场景下会自动做像素对齐或更友好的抗锯齿处理，因此不会出现该问题。
你的代码中，(this.rect.x - camera.location.x) * GRID_W这类计算很可能得到小数（非整数）坐标，触发了Safari的这个渲染特性。

修复方案

强制坐标取整：将绘制的x、y坐标转换为整数，消除亚像素渲染的影响。根据游戏的渲染需求，可选择Math.floor()、Math.round()或Math.ceil()，示例代码：

const drawX = Math.floor((this.rect.x - camera.location.x) * GRID_W);
const drawY = Math.floor((this.rect.y - camera.location.y) * GRID_H);
CONTEXT.drawImage(
    CACHES.get(this.materialURL),
    drawX,
    drawY,
    GRID_W,
    GRID_H,
);

关闭图像平滑：如果坐标取整后仍有间隙，可尝试关闭Canvas的图像平滑功能，强制渲染时不进行图像插值：
```
CONTEXT.imageSmoothingEnabled = false;
```
微调绘制尺寸：将绘制的宽高略微放大（比如GRID_W + 0.1），让相邻图形产生极微小的重叠以覆盖间隙，但需注意避免图形拉伸变形。