HTML 画布线条颜色不准确

Question

有人可以解释为什么画布不遵守颜色选择以及如何修复它以便它以“真实”颜色绘制？ 我知道画布使用 0.5 像素坐标，所以我尝试使用 0.5 增量绘制，但它仍然使用时髦的颜色绘制（使用 ColorCop 放大并检查每个像素的颜色：

这是一个应该绘制蓝线的小片段，两条线彼此相邻，第三条线相距 1 个像素，结果是只有第一行是真正的蓝色，其他所有东西都是紫色或更糟，包括第一行的第一个/最后一个像素：

 const canvas = document.getElementById("line"), ctx = canvas.getContext("2d"); canvas.width = canvas.height = 100; ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.imageSmoothingEnabled = false; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

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

我的显示器分辨率为 2560x1440，缩放比例为 100%。 不使用系统/浏览器/软件或任何类型的缩放/缩放。 如果我在 MS Paint 中绘制一个像素，我会在显示器上看到一个像素，没有抗锯齿，没有伪影。

Answer 1

这样做，您的画布将显示高分辨率像素

1. 将画布宽度和高度设置为（所需宽度和高度）* devicePixelRatio * 2

2. 使用 css 样式属性将其重新分配为您想要的宽度和高度

3. 尺度上下文 2, 2

   默认情况下，画布上的一个单位正好是一个像素。 缩放转换会修改此行为。 例如，缩放因子为 0.5 导致单位大小为 0.5 像素； 因此，形状以正常尺寸的一半绘制。 同样，缩放因子为 2.0 会增加单元大小，使一个单元变为两个像素； 因此，形状以正常尺寸的两倍绘制。

 const width = height = 100 const pixelRatio = window.devicePixelRatio * 2; const canvas = document.getElementById('line'); canvas.width = width * pixelRatio; canvas.height = height * pixelRatio; canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; const ctx = canvas.getContext("2d"); ctx.scale(pixelRatio, pixelRatio); ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

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

Answer 2

您可能使用的是高分辨率显示器。 CSS 将缩放您的画布并创建抗锯齿。

为了克服这个问题，您可以将画布的大小乘以显示器的像素比，然后使用 CSS 缩小到预期大小：

 const canvas = document.getElementById("line"), ctx = canvas.getContext("2d"), dPR = window.devicePixelRatio; // multiply by dPR canvas.width = canvas.height = 100 * dPR; // downscale through CSS canvas.style.width = canvas.style.height = "100px"; ctx.scale(dPR, dPR); ctx.strokeStyle = 'blue'; ctx.lineCap = "square"; ctx.imageSmoothingEnabled = false; ctx.moveTo(10.5, 40.5); ctx.lineTo(80.5, 40.5); ctx.moveTo(10.5, 41.5); ctx.lineTo(80.5, 41.5); ctx.moveTo(10.5, 43.5); ctx.lineTo(80.5, 43.5); ctx.stroke();

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