Canvas绘制奇数宽度矩形无法正常衔接的原因解析

核心原因 #

你遇到的间隙并非真正的空白，而是Canvas像素对齐规则、高DPI缩放和反锯齿共同作用的视觉效果：

• Canvas坐标的边界特性：Canvas的整数逻辑坐标对应像素之间的分界线，而非像素中心。当你用ctx.scale(dpi, dpi)缩放后，如果屏幕dpi不是整数（比如1.5、2.5），逻辑整数坐标会被映射到物理像素的非整数位置，浏览器会启动反锯齿平滑边缘，产生半透明的过渡像素。
• 颜色渐变放大视觉差：你的代码使用了渐变蓝色，相邻矩形的颜色差异加上反锯齿的半透明边缘，会形成类似“间隙”的视觉效果——本质是两种颜色的混合像素，而非空白。当x全为偶数时，在整数dpi屏幕（比如2x Retina）上，逻辑偶数会被映射到物理偶数像素位置，边缘完全对齐，没有反锯齿，所以衔接平滑。
• 浮点计算误差：非整数dpi下，缩放后的物理坐标可能存在微小浮点误差，导致相邻矩形边缘无法完全贴合，进一步放大视觉间隙。

实用解决方案 #

不需要强制使用偶数坐标，以下三种方法可以解决问题：

1. 关闭反锯齿 #

直接禁用Canvas的图像平滑，让浏览器硬对齐像素，消除半透明边缘：

// 在绘制前添加这行
ctx.imageSmoothingEnabled = false;

这种方法简单有效，适合色块拼接的场景，缺点是边缘会显得锐利，但不会影响整体效果。

2. 直接使用物理像素绘制 #

跳过ctx.scale，直接基于物理像素计算所有坐标和尺寸，从根源避免缩放误差：

let canvas = document.getElementById("c"),
  ctx = c.getContext("2d"),
  height = 70,
  width = 500;

let dpi = window.devicePixelRatio;
canvas.width = width * dpi;  
canvas.height = height * dpi;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

// 直接生成物理坐标的points
let points = new Array(100 + 1).fill(0).map((n, i) => {
  return (i * 5 + (Math.random() > 0.5 ? 2 : 0)) * dpi;
});

// 绘制物理尺寸的矩形
for (let i = 0; i < (points.length - 1); i++) {
    let point = points[i], nextPoint = points[i+1];
    let rectWidth = nextPoint - point;
    let v = Math.floor((i / (points.length-1)) * 255);
    ctx.fillStyle = `rgb(50, 50, ${v})`;
    ctx.fillRect(point, 10 * dpi, rectWidth, 50 * dpi);
}

3. 轻微重叠矩形 #

让每个矩形的宽度增加1逻辑像素，或者让下一个矩形的起始位置左移1像素，通过微小重叠覆盖可能的间隙：

// 生成矩形时，宽度+1
result.push([point, 10, width + 1, 50]);

这种方法操作简单，因为你的颜色是渐变的，轻微重叠不会产生明显的视觉违和感。

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