HTML5画布中的translate(0.5,0.5)不能解决线条模糊问题

Question

阅读相关的 文章 后，我尝试了强制指定画布大小为像素，在路径中指定半个像素，以及context.translate(0.5)，但我的画布线仍然模糊。 查看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();
};

我哪里做错了，怎样才能让我的线条像演示中盒子周围的边框那样清晰？

我的效果如下：

- tctc91

---

在Chrome中对我来说运行良好 http://imgur.com/a/515dZ - tctc91

是的，抱歉，它可以在Chrome中工作，但可能无法在Firefox中工作。 - Madhawa Priyashantha

看了您提供的图片，画布分辨率只有显示器的一半。放大并查看X轴上的像素，DOM线条为1像素，但仍然比字母上的像素宽两倍。这意味着画布被拉伸了，模糊是由于双线性过滤造成的。要么您正在选项卡上缩放，要么您有一个Retina显示器。将canvas.width和高度设置为原来的两倍，将canvas.style.width和高度设置为DOM像素。删除ctx.translate并添加ctx.scale(2,2)，所有问题都会得到解决。 - Blindman67

谢谢，问题已解决。请将其作为答案并我会接受 :) - tctc91

@Blindman67。从图片中翻译出内容，太棒了！ - markE

Answer 1

Retina & HiDPI 设备

通过查看您提供的图片，画布的分辨率是显示器分辨率的一半。放大并查看“X”上的像素，在该字母上DOM线条为1px，但仍然是这个宽度的两倍。这意味着画布正在被拉伸，而模糊是由于双线性过滤引起的。无论是您在标签上缩小还是您使用的是retina或HiDPI显示器，请将canvas.width和canvas.height设置为原来的两倍，并将canvas.style.width和canvas.style.height设置为DOM像素。删除ctx.translate并添加ctx.scale（2,2），所有问题都将得到解决。

放大图片

- Blindman67

---

ctx.scale(2,2) 的缺点是你不能绘制 1 像素的细线，每条线都至少有 2 像素宽。在视网膜设备上可以清楚地看到差异。解决方法是将画布扩大两倍，绘制两倍大的图像-使用物理设备的像素。我在这里写了一篇文章：http://www.ntaso.com/how-to-draw-sharp-lines-on-a-html5-canvas-for-retina-displays/。 - ntaso

@ntaso 是的，你可以渲染1像素的线条，只需设置 ctx.lineWidth=0.5 即可在比例为2时获得1像素的线条。如果比例为100，则可以使用 "ctx.lineWidth=0.01;" 画出1像素的线条。我的答案是关于将画布放大两倍，比例只是为了让您仍然可以使用DOM像素坐标进行渲染，而不必将每个坐标乘以2。这只是一种方便的方式。 - Blindman67