解决 canvas 在高清屏中绘制模糊的问题

<canvas id="canvas" width="540" heihgt="180"></canvas>
<script type="text/javascript">
    //画文字
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.font = "18px Georgia";
    ctx.fillStyle = "#999";
    ctx.fillText("我是模糊的文字", 50, 50);
</script>

<canvas id="my_canvas" width="540" heihgt="180"></canvas>
<script type="text/javascript">
    // 获取像素比
    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 myCanvas = document.getElementById("my_canvas");
    var context = myCanvas.getContext("2d");
    var ratio = getPixelRatio(context);

    myCanvas.style.width = myCanvas.width + 'px';
    myCanvas.style.height = myCanvas.height + 'px';

    myCanvas.width = myCanvas.width * ratio;
    myCanvas.height = myCanvas.height * ratio;

    // 放大倍数
    context.scale(ratio, ratio);

    context.font = "18px Georgia";
    context.fillStyle = "#999";
    context.fillText("我是清晰的文字", 50, 50);
</script>