Demo

用到的 canvas 技巧

• ctx.save( ) //儲存當下座標狀態
• ctx.restore( ) //還原上⼀個儲存的狀態
  原則 - 先進後出(Stack)
  利⽤儲存狀態，將函數產⽣的座標變化限制在函數內
  

function draw(delta) {
 totalSeconds += delta;

 var vx = 100; // the background scrolls with a speed of 100 pixels/sec
 var numImages = Math.ceil(canvas.width / img.width) + 1;
 var xpos = totalSeconds * vx % img.width;

 context.save();
 context.translate(-xpos, 0);
 for (var i = 0; i < numImages; i++) {
     context.drawImage(img, i * img.width, 0);
 }
 context.restore();
}

final

圖檔引用 第二屆精神時光屋，Janet Yang 設計師

Panning and scrolling background images using the canvas element

HTML5 Game Development | Infinitely Scrolling Background

動畫互動網頁特效入門（JS/CANVAS）

捲軸背景

若有錯誤的觀念或是資料授權有問題，再煩請通知我，謝謝