在HTML5中使用画布呈现的模糊图像和文本

Question

我习惯使用canvas元素在HTML5中渲染图像。但是在某些浏览器上，图像非常模糊。我试图用img元素替换canvas元素然后变得清晰。但是对于某些图像，我必须使用画布，因为我在图像上渲染文本叠加（顺便说一下，用画布绘制的文本也很模糊）。我不确定为什么模糊发生并且有办法解决这个问题吗？

Answer 1

由于您没有显示相关代码，因此该答案将是通用的 - 根据需要进行调整。

只需将画布设置为图像大小：

var img = document.getElementById('imageID'),      /// provide the image
    canvas  = document.getElementById('canvasID'), /// provide the canvas element
    ctx = canvas.getContext('2d');                 /// context

canvas.width = img.width;                          /// set width = image width
canvas.height = img.height;                        /// set height = image height

ctx.drawImage(img, 0, 0);                          /// draw image 1:1 @ [0, 0]

如果画布对于页面来说太大，那么您可以将CSS应用于画布元素，或者直接在画布上设置您想要的大小并以这种方式绘制图像：

canvas.width = 500;   /// example values, replace with actual ones
canvas.height = 400;

ctx.drawImage(img, 0, 0, canvas.width, canvas.height); /// scale image

如果这仍然无法帮助您的图像可能太大而无法在一个步骤中缩小。这是因为画布通常使用双线性插值（出于性能原因），而图像元素通常在缩小过程中被授予双三次插值（插值在缩小时用作低通滤波器）。 / p>

为了克服这个问题，你可以使用我在这个答案中描述的技术：
Html5 canvas drawImage: how to apply antialiasing

Answer 2

问题是具有高分辨率屏幕的设备可以使用不是1：1的devicePixelRatio来获得清晰的图像和文本。虽然带有Retina屏幕的Mac-Books的devicePixelRatio为1：2，但Nexus 7的devicePixelRatio约为1.325。

在此处查看更多信息： http://www.html5rocks.com/en/tutorials/canvas/hidpi/