Page Flipping 在《Double Buffer》介紹了雙重緩衝的高速繪圖技巧，雖然對 2D 遊戲來說已經盡善盡美，但如果要進一步苛求的話，那就是 Back buffer 複製到 Primary surface 的這個動作也算增加電腦的工作量。於是有人想說，為何不跳過這個動作？Back buffer 畫好直接顯示出來當 Primary surface，再把原本的 Primary surface 隱藏起來當 Back buffer，如此反覆進行不也是一樣效果嗎？ 這就是本章節要介紹的 Page Flipping 技巧！ 原始碼 //全域變數 let count=0; let position=0; let displaypointer=0; //載入背景圖片 let background=new Image(); background.src='background.png'; //載入前景圖片 let sprite=new Image(); sprite.src='sprite.png'; //建立畫布 let surface=[document.createElement('canvas'),document.createElement('canvas')]; for(let n in surface){ document.body.appendChild(surface[n]); surface[n].width=600; surface[n].height=300; surface[n].style.position='absolute'; surface[n].style.left='2'; surface[n].style.top='2'; surface[n].style.visibility='hidden'; } //將圖片描繪到畫布 function draw() { displaypointer=1-displaypointer; let context=surface[displaypointer].getContext('2d'); context.drawImage(background,0,0); switch(count){ case 0: context.drawImage(sprite,0,0,96,141,272,position,96,141); count++; break; case 1: context.drawImage(sprite,96,0,96,141,272,position+=9,96,141); count++; break; case 2: context.drawImage(sprite,0,0,96,141,272,position,96,141); count++; break; case 3: count=0; context.drawImage(sprite,288,0,96,141,272,position+=9,96,141); } surface[1-displaypointer].style.visibility='visible'; surface[displaypointer].style.visibility='hidden'; } //每 0.25 秒執行 draw() setInterval(draw,250); 範例下載 19690601A.7z