HTML 画布线条颜色不准确

Question

谁能解释一下为什么画布不服从颜色选择以及如何修复它以使其绘制为“真实”颜色？ 我知道画布使用 0.5 像素坐标，所以我尝试使用 0.5 增量进行绘制，但它仍然使用时髦的颜色绘制（使用 ColorCop 放大并检查每个像素的颜色：

这是一个小sn-p，它应该画蓝线，两条线并排，第三行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>