html5 canvas绘制图片模糊的问题

来源：互联网发布：java调用百度地图api 编辑：程序博客网时间：2024/04/30 16:48

转载地址:http://segmentfault.com/q/1010000002391424/a-1020000002391631

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，具体的原因可以参考这里或这里

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，如下：

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

完整的deom参见这里，请在手机中打开查看效果。

0 0