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

最新推荐文章于 2025-07-17 17:37:19 发布

七夜丨鸣

最新推荐文章于 2025-07-17 17:37:19 发布

阅读量2.3w

点赞数 3

本文探讨了使用Canvas绘制图片时出现模糊的原因，并提供了一种解决方案。通过调整canvas的宽度和高度属性，确保其与CSS宽度一致，同时利用设备像素比例进行缩放，从而改善图像清晰度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

用canvas绘制图片的时候会模糊，但是用img显示的时候就不会，canvas和img的大小是相同的

至于为什么会变模糊，这和浏览器处理 canvas 的方式有关，相关的文章可以参考这篇 High DPI Canvas，这里不作深入介绍。

下面是相关的代码：

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

<!-- canvas -->
<canvas width="300" height="90"></canvas>

<script>
    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>

解决问题：

首先，引入 hidpi-canvas

其实，不只是绘制图片时会出现模糊的问题，正常情况下，在高清屏的设备下，任何绘制canvas中的图形（包括文字）都会出现模糊的问题。上面这个就是为了解决这个问题，但是他没有处理图片。

接下来，修改绘制图片的代码

将 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);
}

这个解决方案本质上是：

不管当前的devicePixelRatio的值是多少，统一将canvasDOM节点的width属性设置为其csswidth属性的两倍，同理将height属性也设置为cssheight属性的两倍，即：

这样整个 canvas 的坐标系范围就扩大为两倍，但是在浏览器的显示大小没有变，canvas画图的时候，按照扩大化的坐系来显示，不清晰的问题就得以改善了