为何DPR=1时Canvas绘制整像素线条仍模糊？

这是因为Canvas采用连续浮点坐标系，而非离散的像素网格。当绘制1px宽度的竖线时：

• 若坐标是整像素值（比如x=100），线条的实际绘制范围是x=99.5到x=100.5——刚好横跨两个相邻物理像素。浏览器会对这两个像素做半透明着色处理，导致线条看起来发虚模糊。
• 若坐标偏移0.5像素（比如x=120.5），线条会正好对齐单个物理像素的中心，绘制范围完全落在一个像素内，因此显示清晰。

解决方法 #

可以通过两种方式避免这类模糊：

• 给整像素坐标手动偏移0.5像素，让线条对齐像素中心
• 用context.translate(0.5, 0.5)一次性偏移整个Canvas坐标系，后续绘制无需单独调整坐标

修改后的示例代码 #

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

// 方式1：手动偏移坐标
context.beginPath();
context.moveTo(100.5, 50);
context.lineTo(100.5, 150);
context.stroke();

// 方式2：全局偏移坐标系
context.save();
context.translate(0.5, 0.5);
context.beginPath();
context.moveTo(120, 50);
context.lineTo(120, 150);
context.stroke();
context.restore();

内容的提问来源于stack exchange，提问作者OSP