Canvas 在高清屏下绘制图片变模糊的解决方法抢沙发

前提条件

假设我们要在 canvas 中绘制一张 300 x 90 的图片，并且要保证它在高清屏中不模糊。那么我们首先要准备一张 600 x 180的图片，处理过高清屏的同学应该会有这方面的经验。

问题重现

OK，我们先把问题重现一下，以便有一个更直观的了解。下面是相关的代码：

<!-- 通过 img 标签引入图片，以便绘制到 canvas 中 -->
<img alt="" src="html5rocks.png" width="300" height="90" />

<!-- canvas -->
<canvas width="300" height="90">
<script type="text/javascript">
function init() {
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(document.querySelector('img'), 0, 0, 300, 90);
}
window.onload = init;
</script>

代码很简单，没有做任何处理，这个 demo 在高清屏的手机中会出现的问题：canvas 中的图片变模糊了！。至于为什么会变模糊，这和浏览器处理 canvas 的方式有关，这里不作深入介绍。

解决办法

首先，引入 hidpi-canvas-polyfill

其实，不只是绘制图片时会出现模糊的问题，正常情况下，在高清屏的设备中，任何绘制在 canvas 中的图形（包括文字）都会出现模糊的问题。

上面这个 polyfill 就是为了解决这个问题，但是它没有处理图片。

接下来，我们需要修改绘制图片的代码，将 init 函数修改成下面这样：

function init() {
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    // polyfill 提供了这个方法用来获取设备的 pixel ratio
    var getPixelRatio = function(context) {
        var backingStore = context.backingStorePixelRatio ||
            context.webkitBackingStorePixelRatio ||
            context.mozBackingStorePixelRatio ||
            context.msBackingStorePixelRatio ||
            context.oBackingStorePixelRatio ||
            context.backingStorePixelRatio || 1;

        return (window.devicePixelRatio || 1) / backingStore;
    };

    var ratio = getPixelRatio(ctx);

    // 注意，这里的 width 和 height 变成了 width * ratio 和 height * ratio
    ctx.drawImage(document.querySelector('img'), 0, 0, 300 * ratio, 90 * ratio);
}

在高清屏的设备中打开，看看 cavans 中的图片是否完美显示。

转载请注明：知识蚂蚁 » Canvas 在高清屏下绘制图片变模糊的解决方法