Html5 Canvas:我能在像iPad2这样的非视网膜设备上画得很清晰吗？
我目前正在开发一个大量使用HTML5 <canvas>的移动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);
}如果我在Retina显示屏上，这将绘制两倍的大小，并缩小它，这给了我真正尖锐的圆圈和文本。
但以iPad2为例，文本看起来有点像像素和模糊，角并不是很锐利，等等。但当我将它与原生iOS应用程序进行比较时，我发现显示器实际上可以绘制出如此清晰的画面，因为那里的应用程序/文本/角看起来真的很不错。我想知道画布绘画是否有什么技巧可以让它看起来更清晰，或者是否有一个合乎逻辑的解释，那就是画布在非高清显示器上看起来不会像原生iOS应用程序那样锐利……
谢谢!
回答 3
Stack Overflow用户
发布于 2012-09-27 17:44:22
本机文本呈现方法必须采用不同的呈现路径，因为与<canvas> draw()方法相比，它们具有更多用于消除锯齿的上下文信息，如子像素抗锯齿。(如果像素放大，子像素抗锯齿将产生非常丑陋的伪影)
恐怕没有解决方案可以将文本渲染控制在如此低的级别，您必须简单地接受<canvas>所提供的内容。
尝试使用不同的字体。
或者，您可以尝试使用平显样式的CSS在<canvas>上覆盖DOM文本。
Should I use multiple canvases (HTML 5) or use divs to display HUD data?
Stack Overflow用户
发布于 2012-09-27 18:17:40
您可以尝试将坐标偏移到最近的半像素。.lineTo(5，5)这样做：.lineTo(5.5，5.5)。
Stack Overflow用户
发布于 2015-01-11 00:35:41
尝试下面的代码，可能会有所帮助，
if (window.devicePixelRatio == 2) {
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
context.scale(2, 2);
}https://stackoverflow.com/questions/12618052
复制相似问题
腾讯云开发者
