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

参考博客：http://www.css88.com/demo/canvas_retina/index.html

模糊的文字：

获取像素比之后清晰的文字：

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