背景

近期在開(kāi)發(fā)小程序中，接觸最多的就是 canvas 了，期間又因?yàn)榧嫒菪缘膯?wèn)題，又經(jīng)歷了底層 API 的新舊版的替換，踩的坑可謂令人印象深刻。小程序（微信）的 canvas 與 HTML 標(biāo)準(zhǔn)的 canvas 有較大區(qū)別，就連小程序本身的 canvas 底層 API 都有兩個(gè)大版本的區(qū)別（其實(shí)遠(yuǎn)古時(shí)期還有一個(gè)版本，但年代過(guò)于久遠(yuǎn)就不做考究了）。目前現(xiàn)存的兩個(gè)版本的區(qū)別在于是否支持「同層渲染」。

同層渲染

小程序的內(nèi)容大多是渲染在 WebView 上的，如果把 WebView 看成單獨(dú)的一層，那么由系統(tǒng)自帶的這些原生組件則位于另一個(gè)更高的層級(jí)（如 canvas、video）。兩個(gè)層級(jí)是完全獨(dú)立的，因此無(wú)法簡(jiǎn)單地通過(guò)使用 z-index 控制原生組件和非原生組件之間的相對(duì)層級(jí)。想要在原生組件之上只能用 cover-view 和 cover-image 來(lái)實(shí)現(xiàn)。但 cover-view 和 cover-image 支持的 css 樣式是在很有限，而且經(jīng)過(guò)實(shí)踐來(lái)看，cover-view 在安卓部分機(jī)器上性能真的很差。

「同層渲染」則是將原生組件直接渲染到 WebView 層級(jí)上，就可以通過(guò)簡(jiǎn)單的 z-index 來(lái)控制層級(jí)，而且支持的 css 非常豐富，麻麻再也不用擔(dān)心我碰到的層級(jí)問(wèn)題了！是不是看起來(lái)很美好？然而現(xiàn)實(shí)非常殘酷。

「同層渲染」存在的問(wèn)題

首先，根據(jù)小程序官方的文章來(lái)看，幾乎是重構(gòu)了整個(gè)「原生組件」，使用方式和支持的特性與之前的區(qū)別都非常大，非常類(lèi)似標(biāo)準(zhǔn)的 canvas API，甚至官方聲稱(chēng)「支持標(biāo)準(zhǔn) canvas 的大部分屬性方法」。但是根據(jù)我的實(shí)際項(xiàng)目經(jīng)驗(yàn)來(lái)看，新版 canvas API 僅僅只是在 iOS 上表現(xiàn)良好，在部分安卓機(jī)器上會(huì)出現(xiàn)許多怪異行為。一個(gè)簡(jiǎn)單的例子是繪制多個(gè)相同的形狀時(shí)，畫(huà)筆似乎會(huì)出現(xiàn)在「飄忽不定」的位置上，導(dǎo)致繪制最終結(jié)果無(wú)法預(yù)測(cè)。另外很讓人頭疼的一個(gè)地方在于 drawImage 方法上。舊版 API drawImage 第一個(gè)參數(shù)是圖片路徑，本地路徑或網(wǎng)絡(luò)路徑皆可，但新版 API drawImage 第一個(gè)參數(shù)必須是圖片實(shí)例，由于小程序無(wú)法獲取 DOM 元素，只能用官方提供的 createImage 方法創(chuàng)建圖片實(shí)例，在其 onLoad 回調(diào)中再次調(diào)用 drawImage，才能實(shí)現(xiàn)原先簡(jiǎn)單的方法。諸如此類(lèi)。但這些都是可以克服的，最終導(dǎo)致我們放棄的原因是其在部分安卓機(jī)器上的「不確定性」，如果在「新特性」和「兼容性」上做選擇，我想我還是堅(jiān)持選擇「兼容性」吧。就好像「優(yōu)雅降級(jí)」和「漸進(jìn)增強(qiáng)」，我更傾向于后者。

「兼容性」下的「同層渲染」

我相信大多數(shù)做過(guò)小程序 canvas 相關(guān)都有層級(jí)的煩惱。既然無(wú)法使用新版 API 來(lái)實(shí)現(xiàn)，那問(wèn)題總要解決，最終我們想出了一套在舊版 API 也可以實(shí)現(xiàn)類(lèi)似「同層渲染」的效果。目前需要「同層渲染」的場(chǎng)景基本上都是需要在 canvas 上彈層，所以在覆蓋 canvas 的時(shí)候不會(huì)同時(shí)操作 canvas，因?yàn)榭梢岳胏anvasToTempFilePath 可以臨時(shí)將 canvas 轉(zhuǎn)成圖片，然后隱藏 canvas，顯示 tempImage 即可。

黎明的曙光

新版 canvas API 并不是一無(wú)是處，有一個(gè)很大的變化在于它不再使用物理尺寸來(lái)繪制，使用的是實(shí)際尺寸。這就會(huì)使得使用新版 API 繪制的結(jié)果比原來(lái)高清許多，這算是為數(shù)不多的優(yōu)點(diǎn)吧。另外新版 canvas API 在 iOS 上表現(xiàn)還是很不錯(cuò)的。希望未來(lái)官方可以讓新版 canvas API 兼容性更優(yōu)秀，讓開(kāi)發(fā)者早日擺脫這些臨時(shí)方案。