即使 devicePixelRatio (DPR) 为 1，画布绘制线也会模糊

Question

有人能够解释为什么在 DPR==1 行中整个像素仍然模糊吗？

https://codepen.io/Ondej-Spilka/pen/LYvrpby

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(100, 50);
context.lineTo(100, 150);
context.stroke();

context.beginPath();
context.moveTo(120.5, 50);
context.lineTo(120.5, 150);
context.stroke();

提前致谢！

Answer 1

这里的模糊与 DPR 没有任何关系。

当你思考画布上的像素网格，包括子像素的概念时，你会意识到 (0, 0) 的坐标不是左上角的像素，而是实际上的顶部该像素的左角。

这意味着坐标

x = 100

上宽度为 1 的线的中心并不位于索引为 100 的像素的中间，而是位于其左边缘。

您正在坐标 x = 100 上绘制一条

1 像素宽度

的线，因此该线的绘制范围从 99.5 到 100.5，以便像您想要的那样以 x = 100 坐标为中心。这意味着以一半的强度对 2 个像素进行着色，从而导致外观模糊。

第二条线将中心移动+0.5。它的中心为 120.5，因此该线水平从

x = 120

到

x = 121

，相当于对索引 120 处的像素的整个宽度进行着色，并且不会显得模糊。

您将看到，通过在开始处设置

context.lineWidth = 2;

，

x = 100

处的线会显得清晰（因为它现在从

x = 99 to x = 101

开始），而

x = 120.5

处的线则显得模糊（因为它从

x = 119.5

开始跨越）到

x = 121.5

）。