HTML5 Canvas translate(0.5,0.5) 不修复线条模糊答案

【问题标题】：HTML5 Canvas translate(0.5,0.5) not fixing line blurrynessHTML5 Canvas translate(0.5,0.5) 不修复线条模糊
【发布时间】：2017-02-18 00:24:27
【问题描述】：

阅读related articles，我尝试强制画布大小以像素为单位，为路径指定半像素，还指定了 context.translate(0.5) 但我的画布线条仍然模糊。

See Codepen.

const ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5);

/* Function to draw HTML5 canvas line */
const drawPath = (startX, startY, endX, endY) => {
  ctx.beginPath(); 
  ctx.lineWidth = "1";
  ctx.strokeStyle = "red"; 
  ctx.moveTo(startX, startY);
  ctx.lineTo(endX, endY);
  ctx.stroke();
};

我哪里出错了，如何让我的线条像演示中框周围的边框一样清晰？

它对我来说是怎样的：

【问题讨论】：

在 Chrome imgur.com/a/515dZ 中对我来说很好
是的，很抱歉在 chrome 中工作可能不在 fx 中
查看您提供的图像。画布是显示器分辨率的一半。放大并查看 X 上的像素，DOM 线是 1 像素，但宽度仍然是字母上像素的两倍。这意味着画布被拉伸并且模糊是由于双线性过滤造成的。您要么在选项卡上放大，要么拥有视网膜显示器。将canvas.width & 高度设置为原来的两倍，将canvas.style.width & 高度设置为 DOM 像素。去掉ctx.translate，加上ctx.scale(2,2)，一切就清楚了。
谢谢，解决了。把它作为一个答案，我会接受:)
@Blindman67。 ...并且仅来自图像（！）--太棒了！

标签： javascript html canvas

【解决方案1】：

Retina 和 HiDPI 设备

查看您提供的图片。画布是显示器分辨率的一半。放大并查看“X”上的像素，DOM 线是 1 像素，但宽度仍然是该字母上像素的两倍。这意味着画布被拉伸并且模糊是由于双线性过滤造成的。您要么在选项卡上缩小，要么有视网膜或 HiDPI 显示器。将canvas.width 和canvas.height 设置为两倍，将canvas.style.width 和canvas.style.height 设置为DOM 像素。删除ctx.translate并添加ctx.scale(2,2)，一切都会清楚。

放大图片

【讨论】：

ctx.scale(2,2) 的缺点是不能绘制 1px 细线，并且每条线的宽度至少为 2px。您可以在视网膜设备上真正看到差异。解决方案是将画布制作成两倍大小并绘制两倍大——使用物理设备的像素。我在这里写了一篇关于这个的帖子：ntaso.com/…
@ntaso 是的，您可以只设置ctx.lineWidth=0.5 渲染 1px 线，当比例为 2 时，您会得到 1px 线。如果比例为 100，您可以使用“ctx.lineWidth”绘制 1 像素线=0.01；"。我的答案是让画布大 2 倍，比例只是为了让您仍然可以使用 DOM 像素坐标进行渲染，而不必将每个坐标乘以 2。这只是为了方便。