對於canvas繪製效能提高問題，可以考慮使用「雙緩衝」技巧。
canvas影象傳統繪製是這個樣子的：
（1）在可見畫布上畫出乙個圓。
（2）在可見畫布上畫出乙個三角。
（3）在可見畫布上畫出乙個方塊。
「雙緩衝」技巧則是這個樣子：
（1）在非可見畫布上畫出乙個圓。
（2）在非可見畫布上畫出乙個三角。
（3）在非可見畫布上畫出乙個方塊。
（4）將非可見畫布上的內容一次性畫到可見畫布上。
也就是說，在瀏覽器上，使用雙緩衝技術進行canvas物件的繪製只會對瀏覽器進行一次渲染。就理論而言，在需要繪製的東西非常多的時候，雙緩衝技術可以有效減少頁面閃爍次數。
之前做過實驗，在canvas畫布中有若干個圓做無規則碰撞運動，設定兩個對照組，乙個用傳統方法繪製圓，另乙個則是使用雙緩衝技巧。以下是實驗記錄：
第一次對比：
兩組都是900個圓在canvas中進行無規則運動並相互碰撞，兩組都執行流暢
第二次對比：
兩組都是1100個圓在canvas中進行無規則運動並相互碰撞，兩組都執行流暢
第四次對比：
兩組都是2100個圓在canvas中進行無規則運動並相互碰撞，兩組都開始出現掉幀現象
第五次對比：
兩組都是2500個圓在canvas中進行無規則運動並相互碰撞，兩組都有較為明顯的卡頓現象，仍然沒有明顯的效能差別
第六次對比：
兩組都是3000個圓在canvas中進行無規則運動並相互碰撞，兩組都卡頓，仍然沒有明顯的效能差別
第七次對比：
兩組都是3500個圓在canvas中進行無規則運動並相互碰撞，兩組都很卡頓，仍然沒有明顯的效能差別
當時的出的結論是：雙緩衝技巧對於html5 canvas效能提公升效果並不明顯。
現在想來，其實還有一種可能：瀏覽器把效能都用在計算那幾千個撞來撞去的圓的速度、角度變化上去了，而「大量繪製影象」的實驗目的並沒有得到體現。
另外，所謂「卡頓程度」在當時是使用肉眼判斷的，這又是另乙個不嚴謹之處。
在開發 影象 動畫 遊戲 相關的程式時, 雙緩衝( double-buffer )一直是程式設計師常用(必用)的技巧.
當然 隨著各種引擎 框架的發展,以及計算機語言本身的進步 開發人員已經不需要在親自去實現了(其實 這個實現起來也不複雜)
html5中的canvas 為我們使用js在瀏覽器中進行圖形影象以及動畫遊戲的開發提供了基礎保障, 但是它並沒有高階到會自動的實現雙緩衝, 不過不用擔心, 因為它根本不需要雙緩衝.
雙緩衝最初的本意 是為了減少可見螢幕(畫布)的重新整理次數 避免畫面閃爍.
在傳統語言中 如果不使用雙緩衝,執行下面的操作:
1 在可見畫布上畫出乙個圓 //系統自動重新整理並渲染可見畫布
2 在可見畫布上畫出乙個三角 //系統自動重新整理並渲染可見畫布
3 在可見畫布上畫出乙個方塊 //系統自動重新整理並渲染可見畫布
那麼每一步之後 顯示系統都會重新整理一次"可見畫布", 也就是說在短短的時間裡 會重新整理多次畫布.
使用雙快取之後(多了乙個非可見畫布,也就是那個緩衝):
1 在非可見畫布上畫出乙個圓
2 在非可見畫布上畫出乙個三角
3 在非可見畫布上畫出乙個方塊
4 將非可見畫布上的內容一次性畫到可見畫布上
使用雙緩衝後 雖然繪畫次數多了一次, 但是 實際上可見畫布的重新整理次數變少了 可以有效的降低畫面閃爍的現象.
而在瀏覽器中使用canvas時, 沒必要使用雙緩衝, 因為系統不會在每次繪圖之後都立即重新整理canvas.
舉個例子 偽**.
function a()
} 當執行函式a時, 雖然對canvas執行了10次的繪圖操作,但是並不會重新整理和渲染可見畫布,而只有當函式執行完成後 才會一次性的重新整理並渲染出canvas上的東西.
(當然 如果你使用了settimeout那就另當別論了)
網上有一些人用canvas寫的遊戲 自己實現了一套雙緩衝機制, 其實完全多餘的,對效能不僅沒有提高 還會有一定的降低.
******************************===
以上結論只針對 2023年3月23日之前的 canvas和js, 以後如果js 瀏覽器 canvas有什麼變化 我不敢保證.
不過 即使以後js支援多執行緒了 支援更多nb特性了, 那麼我覺得這個雙緩衝也是多餘的.
這個本來就應該是機器底層 作業系統甚至是硬體級別支援的, 頂層編碼人員原本就不應該去關注所謂的雙緩衝.
******************************===
opengl學習筆記 雙緩衝與融合技術
今天看了看opengl的融合技術，聯絡前一段時間老師讓我改的乙個用他自己的框架實現的3d物體透明融合的程式，感覺到老師說的思路，不可以實現。因為三維的透明物體，簡單的使用融合功能和融合因子是不夠的，三維物體有遠近，因此三維物體的繪製過程是利用的是深度緩衝技術。這樣的話，對於繪製透明物體與不透明物體，...
簡單的GDI 雙緩衝的分析與實現
為什麼要使用雙緩衝繪製 在進行多圖元繪製的時候 因為是要乙個乙個畫上去，所以每畫乙個圖元，系統就要做一次圖形的繪製操作，圖形的重繪是很占用資源的，特別當需要重繪的圖形數量很多的時候，所造成的消耗就特別大，導致閃爍,不流暢等情況。那麼如何來解決這個問題呢？那就是雙緩衝.它的基本原理就是 先在記憶體中開...
CSS3文字與字型相關樣式
1 功能 給頁面上的文字新增陰影效果。2 使用方法 text shadow length length length color 陰影離開文字的橫方向距離 縱方向距離 陰影的模糊半徑 陰影的顏色 注意 陰影離開文字的橫方向距離 縱方向距離 必須指定，可指定負值。陰影的模糊半徑 代表陰影向外模糊時的模...