canvas绘制的图好模糊，怎么解决呢？

今天用canvas绘制了一个图表，但是绘制出来后特别模糊，感觉是拿了一张分辨率很差的图出来（忘记截图了），然后才发现，原来使用canvas还会出现这种问题

原因

在浏览器的window变量中有一个devicePixelRatio的属性，该属性决定了浏览器会用几个（通常是2个）像素点来渲染1个像素，举例来说，假设devicePixelRatio的值为2，一张100x100像素大小的图片，在retina屏幕下，会用2个像素点的宽度去渲染图片的1个像素点，因此该图片在retina屏幕上实际会占据200x200像素的空间，相当于图片被放大了一倍，因此图片会变得模糊。在window中有一个devicePixelRatio的属性，类似的，在canvas context中也存在一个webkitBackingStorePixelRatio的属性（仅safari和chrome），该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。

解决

我们只需要得到 devicePixelRatio 和 webkitBackingStorePixelRatio相除，得到一个比例，然后画图的时候，宽和高都乘以这个比例就好了。

举例

这是我刚开始画的一个Hello world：
html代码如下：

<canvas id="canvas" width="300px" height="300px"></canvas>

js代码如下：

function draw() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.font = "20px serif";
    ctx.fillText("Hello world", 10, 50);
}
draw();

但是此时显示的字体有点模糊（该例子不是很明显）：

那么解决后的代码如下：

function draw() {
    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 canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var ratio = getPixelRatio(ctx);

    ctx.font = "30px serif";
    ctx.fillText("Hello world", 10 * ratio, 50 * ratio);
}

draw();

此时的显示为：

该demo代码地址：https://github.com/yangzhanmei/canvas-blurry-solve-demo

该例子不是很明显，大家可以在遇到很模糊的情况下使用该方法