Double Buffer 在《Sprite》介紹了連續圖像的高速繪圖技巧，適用於 2D 遊戲的開發，像是 RPG 的主角在地圖上移動、或者超級馬力歐兄弟在橫向捲動地圖上跑跑跳跳。 然而該範例有個缺點，就是它直接在畫面上描繪 Sprite，在電腦效能低落的情況下，玩家有可能會看到畫面出現描繪 Sprite 時留下的痕跡，導致畫面閃爍不好看。 因此請進一步探究本章節所要介紹的 Double Buffer，它其實很簡單，純粹只是再建立一個畫面，專門在私底下做繪圖的動作，畫好之後再把結果複製到主要畫面，這樣就能避免留下繪圖的痕跡1。除此之外，這種做法會像卡通連續顯示所有畫好的畫面一樣，畫面會變得相當流暢。 原始碼 //全域變數 let count=0; let position=0; //載入背景圖片 let background=new Image(); background.src='background.png'; //載入前景圖片 let sprite=new Image(); sprite.src='sprite.png'; //建立畫布 let backbuffer=document.createElement('canvas'); let primarysurface=document.createElement('canvas'); document.body.appendChild(primarysurface); //調整畫布大小 backbuffer.width=600; backbuffer.height=300; primarysurface.width=600; primarysurface.height=300; //將圖片描繪到畫布 function draw() { let backcontext=backbuffer.getContext('2d'); backcontext.drawImage(background,0,0); switch(count){ case 0: backcontext.drawImage(sprite,0,0,96,141,272,position,96,141); count++; break; case 1: backcontext.drawImage(sprite,96,0,96,141,272,position+=9,96,141); count++; break; case 2: backcontext.drawImage(sprite,0,0,96,141,272,position,96,141); count++; break; case 3: count=0; backcontext.drawImage(sprite,288,0,96,141,272,position+=9,96,141); } let primarycontext=primarysurface.getContext('2d'); primarycontext.drawImage(backcontext.canvas,0,0); } //每 0.25 秒執行 draw() setInterval(draw,250); 範例下載 19690525A.7z