html5的canvas怎么调整画图的清晰度

 我来答

1个回答

#热议# 空调使用不当可能引发哪些疾病？

育知同创教育
2016-12-04 · 百度知道合伙人官方认证企业

育知同创教育

1【专注：Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址：北京市昌平区三旗百汇物美大卖场2层，微信公众号：yuzhitc】

向TA提问

关注

展开全部

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。
首先，引入上方这个polyfill;
然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法

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(ctx);

之后，在调用ctx.drawImage()的时候，给width和height乘以ratio，如下：

1

ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);