我目前正在开发一个大量使用 HTML5 的移动网络应用程序 <canvas> . 我在 Canvas 上画了很多圆圈和文字。

我正在执行以下操作来检测我当前是否正在高清/视网膜显示器上绘图:

// 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);
}

如果我在 Retina 显示屏上，它只会绘制两倍大，然后按比例缩小，这会给我非常清晰的圆圈和文本。

但例如在 iPad2 上，文本看起来有点像像素和模糊，角落不是很锐利等等。但是当我将它与原生 iOS 应用程序进行比较时，我发现显示器实际上可以画得如此清晰，因为应用程序/文本/角落看起来非常漂亮。我想知道 Canvas 绘图是否有任何技巧可以使它看起来更清晰，或者是否有一个合乎逻辑的解释，即 Canvas 在非高清显示器上看起来不如 native iOS 应用程序那么清晰...

谢谢!

最佳答案

原生文本渲染方法必须采用不同的渲染路径，因为它们比 <canvas> 有更多的上下文信息可用于抗锯齿。 draw() 方法，如子像素抗锯齿。 (如果像素按比例放大，子像素抗锯齿会产生非常难看的伪像)

恐怕没有解决方案可以控制这种低级别的文本呈现，您必须简单地采用 <canvas> 的内容给你。

尝试使用不同的字体。

或者，您可以尝试在 <canvas> 上覆盖 DOM 文本使用 CSS position: absolute采用 HUD 风格。

Should I use multiple canvases (HTML 5) or use divs to display HUD data?

关于ios - Html5 Canvas : Can I draw really sharp on non-retina devices like iPad2?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12618052/