笔记:canvas 支持retina显示解决模糊的问题

之所以模糊是在浏览器上生成的图片是1x的非矢量图,所以在retina屏幕上会出现模糊的问题(手机版的浏览器无此问题),以下是我整理的一段代码。

原理很简单,先算出 ratio 值(2,3等)然后根据 ratio 值对 canvas 的 width 和 height 调整,并且一定要对

canvas.getContext("2d")

获取的对象进行 scale(ratio, ratio) 相同的倍数,否则图片会被拉小。

function reviseRatio(canvas, width, height)
{
    var context = canvas.getContext("2d");
    var backingStoreRatio = context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio || 1;

    var devicePixelRatio = window.devicePixelRatio || 1;

    // canvas的实际渲染倍率
    var ratio = devicePixelRatio / backingStoreRatio;

    if (ratio > 1)
    {
         canvas.width = width * ratio;
         canvas.height = height * ratio;
         context.scale(ratio, ratio);
     }
    else
    {
        canvas.width = width;
        canvas.height = height;
    }
    canvas.style.width = width;
    canvas.style.height = height;
}

直接调用方法

reviseRatio(canvas, 100, 80);

即可修正参数。

其中, canvas 是需要修正的canvas的dom对象,100是显示的宽度,80是高度(会渲染出一个 200 * 160 的canvas的图片)

Comments are closed.