解决 canvas 在高清屏中绘制模糊的问题

拼搏现实的明天。 2021-11-17 06:54 1024阅读 0赞

#### 1、问题 ####

使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]  
因为 canvas 不像svg这样,canvas不是矢量图，而是像我们像常见图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。

因此，要做 Retina 屏适配，关键是知道当前屏幕的设备像素比，然后将 canvas 放大到该设备像素比来绘制，然后将 canvas 压缩到一倍来展示。

#### 2、解决思路 ####

在浏览器的 window 对象中有一个 devicePixelRatio 的`属性`，该属性表示了屏幕的设备像素比，即用几个（通常是2个）像素点宽度来渲染1个像素。在控制台打印,就能够看到自己屏幕的devicePixelRatio值为多少.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]  
我们继续,举例来说，假设 devicePixelRatio 的值为 2 ，一张 100×100 像素大小的图片，在 Retina 屏幕下，会用 2 个像素点的宽度去渲染图片的 1 个像素点，因此该图片在 Retina 屏幕上实际会占据 200×200 像素的空间，但是我们总的像素点只有100×100,这就相当于图片被放大了一倍，因此图片会变得模糊。  
类似的，在 canvas context 中也存在一个 backingStorePixelRatio 的属性，该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。 backingStorePixelRatio 属性在各浏览器厂商的获取方式不一样，所以需要加上浏览器前缀来实现兼容。

#### 3、解决问题 ####

1.首先获取 Canvas 对象：

var myCanvas = document.getElementById("my_canvas");
    var context = myCanvas.getContext("2d");

2.获取像素比，将 Canvas 宽高进行放大，放大比例为：devicePixelRatio / webkitBackingStorePixelRatio , 我们写了一个兼容的方法。注意,这个方法有部分浏览器已经废弃使用了,可以直接默认使用1这个值.

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

###### 3.按实际渲染倍率来缩放canvas。 ######

注意基础知识点：  
要设置canvas的画布大小，使用的是 canvas.width 和 canvas.height；  
要设置画布的实际渲染大小，使用的 style 属性或CSS设置的 width 和height，只是简单的对画布进行缩放。  
2倍屏幕下示例代码：

canvas的实际大小的640px × 800px，但是实际渲染到页面的大小是320px × 400px，相当于缩小一倍来显示。

那么在3倍屏幕下就是：

因此，要使canvas适配高倍屏，就是要将canvas放大到设备像素比来绘制，最后将canvas压缩成一倍的物理大小来展示。如下：

myCanvas.style.width = myCanvas.width + 'px';
    myCanvas.style.height = myCanvas.height + 'px';
     
    myCanvas.width = myCanvas.width * ratio;
    myCanvas.height = myCanvas.height * ratio;

###### 4.绘制 ######

由于 Canvas 放大后，相应的绘制图片时也要放大，我们可以采用下面的方法进行处理

context.font = "36px Georgia"; //一倍屏下18px字体
    context.fillStyle = "#999";
    context.fillText("我是清晰的文字", 50*ratio, 50*ratio);// 坐标位置乘以像素比

这样就可以解决 canvas 在高清屏中绘制模糊的问题

--------------------

\[参考链接\]  
[https://www.jianshu.com/p/2cd5143cf9aa][https_www.jianshu.com_p_2cd5143cf9aa]  
[https://github.com/jondavidjohn/hidpi-canvas-polyfill][https_github.com_jondavidjohn_hidpi-canvas-polyfill]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211116/5b7b3f464a274ce7b88a1f3ac7abd1b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9zdXd1MTUwLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211116/84c0ff3240724c0c8ead81b6212dd940.png
[https_www.jianshu.com_p_2cd5143cf9aa]: https://www.jianshu.com/p/2cd5143cf9aa
[https_github.com_jondavidjohn_hidpi-canvas-polyfill]: https://github.com/jondavidjohn/hidpi-canvas-polyfill