共计 657 个字符，预计需要花费 2 分钟才能阅读完成。
引子
在 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
正文完