所以我有一个游戏（更像是一张地图），它会加载一堆瓷砖并将它们放在一起。瓷砖加载得很好，但我想移动视口。我已经研究过这个主题了，我有一个检查键盘的功能。如果＆＃39; d＆＃39;正在按下，我想移动画布，以便视口看到不同的东西。
到目前为止，右侧移动画布的功能如下：
function moveRight() {
ctx.translate(3000, 0);
imageSearch();
};
imageSearch函数更新画布的位置。更新和加载等工作正常，我只是无法弄清楚如何移动画布。感谢提前帮助。
编辑：
这是一个1f01为我修复的JSFiddle：jsfiddle.net/jujhp0yv/1
画布仍然没有移动，所以我还在等待你的回复：）
答案 0 :(得分：0)
尝试将视口存储在变量中。
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）