Sprite Sprite 是一種連續圖像的電腦圖學技術，它把畫面中需要以動畫來展現的物體，另外裁切一小張的圖像來繪製，完成後再貼到畫面上，這樣就不用對整張畫面做繪圖的動作，降低電腦的計算負擔，是一種高速繪圖的技巧。 本章節將介紹在 HTML5 的 Canvas 實作 Sprite 的方式，我們準備兩張圖，一張是背景：background.png，一張是動畫用的人物：sprite.png，以連續圖像的原理製作動畫。 準備好了的話，請按一下「開始展示範例」，檢視本章節所要示範的案例1⋯⋯ 原始碼 // 全域變數 let count = 0; let position = 0; // 載入背景圖片 let background = new Image(); background.src = 'background.png'; // 載入前景圖片 let sprite = new Image(); sprite.src = 'sprite.png'; // 建立畫布 let canvas = document.createElement('canvas'); document.body.appendChild(canvas); // 調整畫布大小 canvas.width = 600; canvas.height = 300; // 先後將背景圖片與前景圖片描繪到畫布 function draw() { let context = canvas.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); } } // 每 0.25 秒執行 draw() setInterval(draw, 250); 範例下載 19690518A.7z