canvas 实现图片局部模糊_canvas画图模糊解决方法

在解决这个问题之前，必须了解以下背景知识：

1. 屏幕分辨率 ：屏幕上面的像素点数，1280x720表示这个显示器水平方向有1280个像素，垂直方向上有720个像素。
2. dpi（点每英寸）：d是显示器上每一个物理的点，p指的是屏幕分辨率中的最小单位
3. 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>

效果图：