HTML Canvas绘制线条颜色不准确的原因及修复方案咨询

核心原因 #

• 线条端点配置问题：你设置的ctx.lineCap = "square"会让线条两端各向外延伸半个线宽的长度，延伸区域会和周边像素产生半透明抗锯齿混合，直接导致线条首尾颜色偏差、相邻线条叠合后色值偏移。
• 描边API的精度限制：stroke方法本身是为绘制任意宽度线条设计的，边缘抗锯齿计算逻辑在不同浏览器实现有差异，哪怕坐标对齐0.5像素也可能出现色值偏差。
• 隐式画布缩放：如果canvas元素的CSS宽高和你设置的canvas.width/canvas.height不一致，浏览器会自动拉伸画布像素，哪怕系统全局缩放为100%也会出现色值模糊偏移。

修复方法 #

最优方案：改用fillRect绘制单像素线条 #

绘制固定1像素宽的直线，用填充API的精度远高于描边API，修改后的代码如下：

const canvas = document.getElementById("line"),
      ctx = canvas.getContext("2d");

// 设置画布像素尺寸
canvas.width = canvas.height = 100;
// 关键：设置CSS显示尺寸和像素尺寸完全一致，避免浏览器隐式拉伸
canvas.style.width = '100px';
canvas.style.height = '100px';

ctx.fillStyle = 'blue';
ctx.imageSmoothingEnabled = false;

// fillRect参数：x坐标、y坐标、宽度、高度，坐标对应像素左上角，直接用整数即可
// 第一条线
ctx.fillRect(10, 40, 70, 1);
// 相邻的第二条线
ctx.fillRect(10, 41, 70, 1);
// 间隔1像素的第三条线
ctx.fillRect(10, 43, 70, 1);

<canvas id="line"></canvas>

保留描边用法的修正方案 #

如果你必须使用stroke绘制，调整两处配置即可：

• 将ctx.lineCap改为默认值butt，取消端点延伸
• 显式声明ctx.lineWidth = 1，避免继承异常线宽

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