关于javascript:Canvas-绘制-1-px-直线模糊非高清屏的问题

引子

在 Canvas 显示含糊问题 中解决了在高清显示屏上含糊的问题，最近碰到了绘制直线的状况，应用了同样的计划，一开始感觉影响不大，但工夫长了，发现非高清屏幕上，直线含糊的感觉越来越显著，就去找了下材料，进行了解决。

• Origin
• My GitHub

问题

这是问题重现页面。

在网上同样能够找同样的问题，从各种答复中，在 LET’S CALL IT A DRAW(ING SURFACE) 中找到较有说服力的解释：

把每一个像素设想为一个正方形。整数坐标（0，1，2…）是正方形的边。如果你在整数坐标之间绘制 1 像素的线，它将与相邻像素块的边重叠，生成的线将绘制两个像素宽度。

例如，如果你尝试绘制从点（1，0）到（1，3）的 1 像素线，浏览器将会在 x=1 坐标点的两边绘制 0.5 屏幕像素。因为屏幕不能显示半个像素，它将线扩大到蕴含 2 个像素。

解决办法

依照下面举例的解释，对应的解决形式是：

如果你尝试从点（1.5，0）到（1.5，3）绘制 1 像素的线，浏览器将会在 x=1.5 坐标点的两边绘制 0.5 屏幕像素，后果就是 1 像素的线了。

也就是说为了绘制只有 1 像素的线，你须要将坐标垂直于线的方向偏移 0.5。这是依照这种形式解决后的页面。

上面在非高清屏上展现比照：

除了下面有些成果的办法外，尝试过但有效的办法有：

• 应用 context.translate(0.5, 0.5)
• 应用 scale

参考资料

• Canvas drawings, like lines, are blurry
• LET’S CALL IT A DRAW(ING SURFACE)
• Window.devicePixelRatio MDN