Ios Html5画布：我能在像iPad2这样的非视网膜设备上画出真正犀利的画面吗？

我目前正在开发一款大量使用HTML5的移动web应用程序。 我在画布上画了很多圆圈和文字

我正在执行以下操作以检测我当前是否在HD/Retina显示器上绘图：

// Retina Display ?             
if (window.devicePixelRatio == 2) {
  canvas.style.width = canvas.width + "px";
  canvas.style.height = canvas.height + "px";
  canvas.width = canvas.width * 2;
  canvas.height = canvas.height * 2;
  context.scale(2, 2);
}

如果我在视网膜显示器上，它会画出两倍大的图像，然后缩小它的比例，这会让我看到非常清晰的圆圈和文字

但在iPad2上，例如文本看起来有点像像素一样模糊，角不太锐利等等。但当我将其与本机iOS应用程序进行比较时，我发现显示器实际上可以画得如此清晰，因为那里的应用程序/文本/角落看起来非常漂亮。我想知道是否有什么技巧可以让画布绘制看起来更清晰，或者是否有一个合理的解释，画布不能像非高清显示器上的本机iOS应用程序那样清晰

---

谢谢

本机文本呈现方法必须采用不同的呈现路径，因为与子像素抗锯齿等

draw（）方法相比，它们具有更多用于抗锯齿的上下文信息。（如果像素放大，亚像素消除混叠会产生非常难看的伪影）

恐怕没有解决方案可以控制这种低级别的文本呈现，您必须简单地接受

提供给您的内容

尝试不同的字体

或者，您可以尝试在HUD样式中使用CSS

position:absolute

将DOM文本覆盖在

上

---

您可以尝试将坐标偏移到最接近的半像素。ie而不是：.lineTo（5，5）执行此操作：.lineTo（5.5，5.5）。

尝试下面的代码，可能会有所帮助

if (window.devicePixelRatio == 2) {
  canvas.width = window.innerWidth * 2;
  canvas.height = window.innerHeight * 2;
  context.scale(2, 2);
}

---

嗨，Richard，你能详细解释一下为什么这会有帮助吗？另一种方法是在开始时使用tanslate：context.translate（0.5,0.5）；然后，您可以使用整个值作为正常值。