大家好，我是前端西瓜哥。我的圖形編輯器項(xiàng)目一直都是用一個(gè) 1080P 的老顯示器開(kāi)發(fā)的。

但最近我改用 Macbook Pro 的視網(wǎng)膜 （Retina） 屏幕開(kāi)發(fā)時(shí)，發(fā)現(xiàn)高分屏（高分辨率屏幕）反而讓圖形編輯器中的線變得模糊了。

這次我們來(lái)看看該如何解決這個(gè)問(wèn)題。

項(xiàng)目地址，歡迎 star：

https://github.com/F-star/suika

線上體驗(yàn)：

https://blog.fstars.wang/app/suika/

高分屏

表達(dá)代碼中的一個(gè)像素（獨(dú)立像素），原本是只需要一個(gè)屏幕的一個(gè)發(fā)光單元（物理像素），一對(duì)一關(guān)系，很好理解。

但隨著顯示器的發(fā)展，我們有了更小尺寸的發(fā)光單位，可以在原本一個(gè)發(fā)光單元的空間上放上更多的小發(fā)光單元。

這種情況下，如果還是一個(gè)發(fā)光單元對(duì)應(yīng)一個(gè)代碼中的像素，會(huì)導(dǎo)致繪制的圖形變小，遠(yuǎn)看看不清楚。

怎么辦，我們的方案是 用多個(gè)發(fā)光單元表示一個(gè)代碼中的像素。比如 Mac 的視網(wǎng)膜 （Retina） 屏幕，會(huì)將獨(dú)立像素寬高乘以 2，映射到 4 個(gè)發(fā)光單元上。

但不一定會(huì)將多個(gè)點(diǎn)設(shè)置相同的顏色，而是會(huì)在一些情況下做抗鋸齒處理，所以在高分屏中會(huì)發(fā)現(xiàn)鋸齒少了，看起來(lái)高清多了，但也會(huì)讓原本就是想要鋸齒狀的邊緣變得光滑。

devicePixelRatio

devicePixelRatio （通常我們用 dpr 變量名）是設(shè)備像素比，指的是當(dāng)前顯示設(shè)備的物理像素分辨率與CSS 像素分辨率之比。

這個(gè)定義有點(diǎn)抽象，其實(shí)就是前文我說(shuō)的那些。對(duì)于 Mac 的視網(wǎng)膜 （Retina） 屏幕，它的 devicePixelRatio 是 2，也就是將一個(gè) CSS 像素寬高各乘以 2，繪制到屏幕的 4 個(gè)發(fā)光單元上。

我們可以通過(guò) window.devicePixelRatio 拿到瀏覽器所在屏幕的設(shè)備像素比。

Canvas 的處理

Canvas 繪制的像素（比如線條），在高分屏中，會(huì)因?yàn)槔L制成 4 個(gè)點(diǎn)（即發(fā)光單元），變得更粗，此外也會(huì)因?yàn)榭逛忼X處理造成模糊。

在 IOS App 的 UI 設(shè)計(jì)中，有一種 ??@2x???，??@3x?? 圖的概念。就是將圖片放大 2 倍和 3 倍進(jìn)行設(shè)計(jì)，然后渲染時(shí)尺寸指定回原來(lái)的尺寸進(jìn)行繪制。

這樣屏幕渲染時(shí)能拿到更多的像素細(xì)節(jié)，做到一個(gè)像素對(duì)應(yīng)一個(gè)發(fā)光單元，不是基于一個(gè) 1x1 的像素，去放大為 2x2 或 3x3，而丟失細(xì)節(jié)。

Canvas 本質(zhì)也是一張圖片，它的 ??width??? 和 ??height??? 屬性代表該圖片的原始寬高， ??style.width??? 和 ??style.height?? 則是實(shí)際渲染寬高。

所以解決方法是，將 Canvas 原始寬高設(shè)置為容器寬度的 devicePixelRatio 倍，然后再用 style.width 和 style.height 設(shè)置為容器寬高。

然后 Canvas 在繪制圖形前，將縮水的 Canvas 通過(guò)縮放變形恢復(fù)原來(lái)的尺寸。

const dpr = window.devicePixelRatio || 1;
const cw = 1000; // 容器寬高，畫(huà)布會(huì)鋪滿這個(gè)容器區(qū)域。
const ch = 1000;

/*** 設(shè)置畫(huà)布屬性 ***/
canvas.width = cw * dpr;
canvas.height = ch * dpr;

canvas.style.width = cw + 'px';
canvas.style.height = ch + 'px';

/*** 繪制 ***/
// 因?yàn)?Canvas 的內(nèi)容縮水了，所以繪制圖形前要縮放 dpr 倍變回?fù)Q來(lái)尺寸
ctx.scale(dpr, dpr); 
// 繪制各種圖形

結(jié)尾

總結(jié)一下，就是高分屏有更小的發(fā)光單元，一般情況下會(huì)用 2x2、3x3 個(gè)點(diǎn)去表示一個(gè)像素，一些情況下會(huì)讓鋸齒邊緣變得光滑，但也可能會(huì)讓清晰的線條的邊緣變得模糊。

對(duì)于圖片和 Canvas，可以擴(kuò)大對(duì)應(yīng)的 devicePixelRatio 倍數(shù)，然后再縮放為頁(yè)面中容器的大小，這樣顯示器就能拿到完整的像素信息了，就不會(huì)應(yīng)為放大而失真。