canvas 绘制模糊问题解决

有些时候用canvas 绘制图片或文字会非常模糊；

 

这是因为缩放问题

canvas标签的 width&height   与它的style中的width&height是不同的！！！！

还有就是Pixel Ratio问题

// polyfill 提供了这个方法用来获取设备的 pixel ratio
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 ratio = getPixelRatio(cxt);

将你的画布上所有的尺寸都要乘上ratio就清晰了

 

 

诚客联信息服务平台