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

【问题标题】：Blurry images and text rendered with canvas in HTML5在 HTML5 中使用画布呈现的模糊图像和文本
【发布时间】：2015-01-16 04:56:52
【问题描述】：

我习惯于使用 canvas 元素在 HTML5 中渲染图像。但是在某些浏览器上，图像非常模糊。我试图用 img 元素替换画布元素，然后它变得一清二楚。但是对于某些图像，我必须使用画布，因为我在图像上渲染文本覆盖（顺便说一句，用画布绘制的文本也很模糊）。我不确定为什么会出现模糊，有没有办法解决这个问题？

【问题讨论】：

您是否正在使用 drawImage 的大小调整版本来调整原始图像的大小？如果是这样，您可以使用本文中的一种方法：stackoverflow.com/questions/18922880/…
是的，我设置了画布的宽度和高度属性。但是，如果我使用 img 并调整它的大小，图片仍然很清晰。
确保你设置了画布元素的宽度/高度——而不是 CSS。如果您使用 CSS 不成比例地调整画布大小，则生成的图像将被扭曲。所以这样做： var canvas=document.getElementById("myCanvas");画布.宽度=图像.宽度；画布.高度=图像.高度。再说一次......如果你用 drawImage 重新缩放你应该检查上面的链接。

标签： html canvas

【解决方案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

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

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

【讨论】：

【解决方案2】：

问题在于具有高分辨率屏幕的设备可能具有不是 1:1 的 devicePixelRatio 以获得清晰的图像和文本。配备 Retina 屏幕的 Mac-Books 的 devicePixelRatio 为 1:2，而 Nexus 7 的 devicePixelRatio 约为 1.325。

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

【讨论】：