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

不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，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)

这是因为图像的采样方式不够好造成的

解决方案是自己写算法进行平均采样

实现方式有两种，一种是js对像素点进行手动合并采样，具体算法可以用这个：github。com斜杠sapics斜杠scale.js

还有一个方案使用webgl，用gpu对图片进行平均合并采样，需要自己写shader，并且需要比较新的浏览器和电脑，需要支持webgl，运行效率比较高。

---