今天用canvas繪制了一個圖表，但是繪制出來后特別模糊列另，感覺是拿了一張分辨率很差的圖出來（忘記截圖了）芽腾，然后才發(fā)現(xiàn)，原來使用canvas還會出現(xiàn)這種問題
原因
在瀏覽器的window變量中有一個devicePixelRatio的屬性祭往，該屬性決定了瀏覽器會用幾個（通常是2個）像素點來渲染1個像素峭拘，舉例來說瞻润，假設(shè)devicePixelRatio的值為2，一張100x100像素大小的圖片艰躺，在retina屏幕下，會用2個像素點的寬度去渲染圖片的1個像素點眨八，因此該圖片在retina屏幕上實際會占據(jù)200x200像素的空間腺兴，相當(dāng)于圖片被放大了一倍，因此圖片會變得模糊廉侧。在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
該例子不是很明顯，大家可以在遇到很模糊的情況下使用該方法
