今天用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
该例子不是很明显，大家可以在遇到很模糊的情况下使用该方法
