我想为画布游戏制作视口

Question

因此，我有一个游戏（更多是地图），该游戏加载了一堆瓦片并将它们放置在一起。 瓦片加载的很好，但是我想移动视口。 我已经研究了这个主题，并且具有检查键盘的功能。 如果按下'd'，我想移动画布，以便视口看到不同的东西。

到目前为止，向右移动画布的功能如下所示：

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

imageSearch函数更新画布的位置。 更新和加载等工作正常，我只是不知道如何移动画布。 帮助将不胜感激，在此先感谢。

编辑：

这是1j01为我修复的JSFiddle：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 ）