canvas 绘制模糊问题解决

最新推荐文章于 2022-10-20 19:28:23 发布

weixin_34318326

最新推荐文章于 2022-10-20 19:28:23 发布

阅读量186

点赞数

原文链接：http://www.cnblogs.com/lk98/articles/7573404.html

版权

有些时候用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就清晰了

转载于:https://www.cnblogs.com/lk98/articles/7573404.html