聊聊Canvas渲染相關 (非API層,偏框架設計方面)

wlove發表於2022-03-07
CanvasAPI框架

image.png

  1. 渲染機制
  2. 渲染效能分析
  3. 非即時渲染 (即時渲染)
  4. 分片渲染
  5. 分畫布圖元拆分渲染

渲染機制

  • Canvas繪製機制：整個畫布是一個畫板,在上面進行繪製各種各樣的圖形,一旦繪製錯誤需要改正,就需要重新繪製。
    ...
    ctx.fillRect(0,0,10,10);
    ctx.clearRect(100, 100, 100, 100);
    ctx.fillRect(0,0,100,100);

渲染效能分析

注意關於圖形計算,例如複雜圖形推導 不算在渲染效能進行分析。

渲染效能主要分析以下幾點:

  • 渲染圖元數量 (視錐體內容[當前視口內容])
  • 渲染圖元的頻率 (例如互動式分析,就需要實時重新整理)

對應優化手段

  • 控制可視區域資料。
  • 減少重新整理頻率 或者將操作行為進行切片。
  • 即時渲染和非同步渲染。
  • 分片/離屏渲染/全域性渲染區域性渲染。
  • ...

非即時渲染

即時渲染指使用者互動行為一旦觸發立刻執行callback。比如下面的場景:

一個使用者控制實體顏色16ms內觸發了N次。我們有倆種解決辦法：

image.png

  1. 每次觸發都進行draw()的操作重新繪製需要繪製N次。
  2. 每隔16ms執行draw()的操作繪製最終呈現的結果。

分片渲染

分片渲染本質上是將一個列表分片，將一次渲染分割成多次渲染。減少繪製圖元,能夠提高幀率。

通過上面的圖我們可以看到分片渲染會導致整體的渲染時間變長，所以這種方案並非用於渲染的效能優化方案，而是作為提升幀率和響應效果的優化方案。

分畫布拆分圖元渲染 (也算是分片)

試想一個場景 畫布內有非常多的圖元 圖元分為很多類別，比如文字,基礎幾何圖形... 而文字內容很多 更新頻率非常低 幾乎不更新 怎麼設計合理？
我提供一個思路,我將用倆個畫布分別繪製這倆部份內容分別是text還有shape。進而減少更新的內容 提高幀率(如下圖)。

image.png

最後

視覺化相關的架構設計,原始碼學習，日常開發。我會逐步進行深入分享。如果對你有幫助請關注我後續的內容。有需要的同學可以加一下我的聯絡方式(在我的主頁,拉你進群聊)。

相關文章