我想製作一個帆布遊戲的視口

Question

所以我有一個遊戲（更多是一張地圖），它加載了一堆拼貼並將它們放在一起。瓷磚加載得很好，但我想移動視口。我研究過這個主題，並且有一個檢查鍵盤的功能。如果'd'被按下，我想移動畫布以使視口看到不同的東西。

到目前爲止，對於移動畫布的功能權限如下：

function moveRight() { 
ctx.translate(3000, 0); 
imageSearch(); 
}; 

凡圖片搜索功能更新的畫布。更新和加載等工作正常，我只是不知道如何移動畫布。預先感謝幫助，謝謝。

編輯：

這裏有一個的jsfiddle是1j01固定對我來說：jsfiddle.net/jujhp0yv/1

畫布仍然不動，雖然，所以我仍然在等待您的答覆:)

Answer 1

嘗試將視圖端口存儲在變量中。

var view = {x: 0, y: 0}; 

然後，在繪製循環/渲染函數的開始處，保存畫布狀態並轉換到視圖端口。

ctx.save(); 
ctx.translate(view.x, view.y); 

如果你想view.x和view.y代表視圖的中心，而不是翻譯是這樣的：

ctx.translate(view.x - canvas.width/2, view.y - canvas.height/2); 

在您的抽獎循環結束/渲染功能，恢復狀態，這樣的翻譯贏得堆積如山。現在

ctx.restore(); 

，你應該能夠修改view.x和view.y移動視圖。 （例如view.x += 5）