背景

Excalidraw中只支持靜態(tài)圖片，如果要顯示gif動(dòng)畫(huà)的話，一種方式是通過(guò)iframe。但是iframe只能在其他類(lèi)型的元素之上；而且gif動(dòng)畫(huà)的播放不好控制（有的算法演示gif一步步演示）。

因此增加在元素上播放gif動(dòng)畫(huà)功能，這樣可以解決層次問(wèn)題、手動(dòng)控制逐幀播放問(wèn)題

效果

1. 自動(dòng)播放。與iframe不一樣的是，這里元素層次可以自由調(diào)整，比如下面矩形遮蓋gif

2. 手動(dòng)控制逐幀播放（這里采用的'<'和'>'按鍵顯示前一幀或后一幀）

實(shí)現(xiàn)

這里我選擇的是在drawElementFromCanvasHook中繪制gif到元素的canvas。需要先解析gif為frames，然后根據(jù)當(dāng)前幀編號(hào)來(lái)顯示幀。