高清 Canvas 原理与 fabric 实现

Posted 2022-08-31 liangklfang

本章节主要讲解 Canvas 高清内容绘制以及在 fabric 中的实现，但是在讲解高清策略之前会从像素的角度分析为什么会有 Canvas 不高清，即模糊的情形，而面临不高清的情形下又该如何思考，如何解决问题。

1.你需要了解的 backingStoreRatio

1.1 设备像素比

1.1.1 物理和逻辑像素

在很久以前，物理、逻辑像素是没区别的，CSS 里写 1 px ，屏幕就给你渲染成 1 个实际的像素点。然而，后来苹果公司为其产品 mac、iPhone 以及 iPad 的屏幕配置了 Retina 高清屏，也就是说这种屏幕拥有的物理像素点数比非高清屏幕多 4 倍甚至更多。如果还按照一个逻辑像素一个物理像素进行展示，那么同一张图片在高清屏上显示的区域面积会是非高清屏的 1/4，这样的话由于图片在屏幕上的展示面积大大缩小，从而会导致图片“模糊”的问题。

1.1.2 设备像素比

上面讲述了物理、逻辑像素的基础概念，这里将通过设备像素比的概念进一步深入剖析物理、逻辑像素。设备像素比（Device Pixel Ratio, DPR）指的是 window.devicePixelRatio, 通过 caniuse 的查询可知，目前该属性已经被所有的主流浏览器所支持。