Question

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

我正在执行以下操作以检测我当前是否正在使用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);
}

如果我在Retina显示器上，这将只画两倍大，然后缩小它，这给了我非常清晰的圆圈和文本。

但是在iPad2上，例如文本看起来有点像素和模糊，角落不是很尖锐等等。但是当我将其与原生iOS应用程序进行比较时，我发现显示器实际上可以画出这种清晰度，因为应用程序/文本/角落看起来非常好。我想知道画布绘制是否有任何技巧可以使事情看起来更清晰，或者是否有逻辑解释说画布看起来不像非高清显示器上的原生iOS应用程序那么尖锐......

谢谢！

Answer 1

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

我担心没有解决方案来控制这个低级别的文本呈现，你必须简单地采用<canvas>给你的内容。

尝试使用不同的字体进行实验。

或者，您可以使用HUD样式的CSS <canvas>尝试在position: absolute上叠加DOM文字。

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

Answer 2

您可以尝试将坐标偏移到最近的半像素。即取而代之：.lineTo（5,5）执行此操作：.lineTo（5.5,5.5）。

Answer 3

请尝试下面的代码，可能只是帮助，

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

Html5 Canvas：我可以在像iPad2这样的非视网膜设备上画得非常清晰吗？

3 个答案: