2

我目前正在开发一个大量使用 HTML5 的移动 Web 应用程序<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 应用程序那样清晰......

谢谢！

4

3 回答 3

1

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

恐怕没有解决方案可以控制这种低级别的文本渲染，您必须简单地接受<canvas>给您的东西。

尝试使用不同的字体。

或者，您可以尝试在 HUD 样式中<canvas>使用 CSS覆盖 DOM 文本。position: absolute

我应该使用多个画布（HTML 5）还是使用 div 来显示 HUD 数据？

于 2012-09-27T09:44:21.537 回答
1

您可以尝试将坐标偏移到最近的半像素。ie 而不是这个：.lineTo(5, 5) 这样做：.lineTo(5.5, 5.5)。

于 2012-09-27T10:17:40.180 回答
0

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

if (window.devicePixelRatio == 2) {
  canvas.width = window.innerWidth * 2;
  canvas.height = window.innerHeight * 2;
  context.scale(2, 2);
}
于 2015-01-10T16:35:41.403 回答