![98889ef0a199de479e6f42cb5fe83b5f.png](https://i-blog.csdnimg.cn/blog_migrate/ac76a4181b7c535baf3b651bff30cd78.jpeg)
在解决这个问题之前,必须了解以下背景知识:
- 屏幕分辨率 :屏幕上面的像素点数,1280x720表示这个显示器水平方向有1280个像素,垂直方向上有720个像素。
- dpi(点每英寸):d是显示器上每一个物理的点,p指的是屏幕分辨率中的最小单位
- ppi(像素每英寸): 每英寸所拥有的像素数量,PPI数值越高,图像越清晰。
在浏览器中,可以通过 window.devicePixelRatio 获取 设备上物理像素和设备独立像素的比例。在 devicePixelRatio > 1 的浏览器或手机上画图,你就会发现图片模糊。这是因为图片被放大了 devicePixelRatio 倍, 我们处理的时候对其进行像素压缩即可实现图片不模糊。
<canvas id="myCanvas1" width="400" height="400" style="width:400px;height:400px"></canvas>
<canvas id="myCanvas2" style="width:400px;height:400px"></canvas>
<script type="text/javascript">
var ctx1 = myCanvas1.getContext('2d');
var ctx2 = myCanvas2.getContext('2d');
// 用canvas.style.width压缩canvas.width
myCanvas2.width = parseInt(getComputedStyle(myCanvas2, null)['width']) * devicePixelRatio;
myCanvas2.height = parseInt(getComputedStyle(myCanvas2, null)['height']) * devicePixelRatio;
var img = new Image();
img.src = './php.jpeg'
img.onload = function () {
this.onload = null;
ctx1.drawImage(img, 0, 0);
// 这里和ctx2 进行对比
ctx1.drawImage(img, 0, 0, img.width / 2, img.height / 2);
ctx2.drawImage(img, 0, 0);
}
ctx1.font ='32px Arial';
// 压缩后,绘制需要同比放大
ctx2.font = 32 * devicePixelRatio + 'px Arial';
ctx1.fillText('未处理之前', 0, 350);
ctx2.fillText('处理之后', 0, 350 * devicePixelRatio);
</script>
效果图:
![fd1150648b3990b0cf1c98d9446d1379.png](https://i-blog.csdnimg.cn/blog_migrate/f39dcc2017a3be78adb19ac9d53c5a07.jpeg)