HTML Canvas绘制网格直线时低分辨率下部分线条显示缺失如何解决

问题表现 #

使用Canvas（含原生Canvas、React PixiJS等基于Canvas实现的绘图类库）绘制0.5px宽度的100*100规格网格时，高分辨率设备下显示正常，低分辨率设备、或高分辨率设备非100%缩放视图下，会出现部分线条初始状态下肉眼不可见的问题，放大页面后可确认线条实际已完成渲染。该问题与所用框架、类库无关，原生Canvas实现同样会复现。

复现代码 #

const lineWidth = 0.5;
const lineColor = 0x000000;
g.lineStyle(lineWidth, lineColor);

// 绘制横向线
for (var x = 0; x <= 1000; x += 10) {
    g.moveTo(x, 0);
    g.lineTo(x, 1000); 
}

// 绘制纵向线
// 注：原代码循环条件存在笔误，`for (var y = 0; 1000; y += 10)`为死循环，已修正为正常逻辑
for (var y = 0; y <= 1000; y += 10) {
    g.moveTo(0, y);
    g.lineTo(1000, y);
}

问题原因 #

该问题由Canvas的亚像素抗锯齿渲染规则导致：

• Canvas绘制1px及以下宽度的线条时，如果线条坐标没有对齐物理像素网格，浏览器会通过相邻像素的半透明效果模拟线条的精确位置，也就是抗锯齿处理
• 低分辨率设备像素密度低，0.5px宽的线条如果刚好落在两个物理像素的中间位置，抗锯齿计算后分配到相邻两个像素的透明度会非常低，默认视图下肉眼几乎无法识别，就会产生“线条漏画”的错觉
• 放大页面时，单个CSS像素会映射到更多物理像素，半透明效果叠加后线条就会重新可见。

修复方案 #

方案1：坐标偏移对齐像素网格 #

绘制线条时将坐标整体偏移0.5个单位，让细线条刚好落在物理像素边界，避免抗锯齿导致的透明度过低问题，修改成本极低：

const lineWidth = 0.5;
const lineColor = 0x000000;
g.lineStyle(lineWidth, lineColor);
const pixelOffset = 0.5;

// 绘制横向线
for (var x = 0; x <= 1000; x += 10) {
    g.moveTo(x + pixelOffset, 0);
    g.lineTo(x + pixelOffset, 1000); 
}

// 绘制纵向线
for (var y = 0; y <= 1000; y += 10) {
    g.moveTo(0, y + pixelOffset);
    g.lineTo(1000, y + pixelOffset);
}

方案2：适配设备像素比（DPR） #

这是Canvas高清适配的通用标准方案，从渲染底层彻底解决亚像素问题，同时能让所有Canvas内容在高DPI屏幕上保持清晰：

• 初始化Canvas时获取当前设备的window.devicePixelRatio值
• 将Canvas标签的width、height属性设置为CSS显示尺寸 * DPR
• 调用绘图上下文的scale方法，将横纵轴均缩放DPR倍
  后续所有绘制逻辑保持原有坐标即可，无需额外调整。

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