我想为 canvas 游戏制作视口

Question

所以我有一个游戏（更像是一张地图）加载一堆图块并将它们放在一起。瓷砖加载得很好，但我想移动视口。我研究了这个主题，并且有一个检查键盘的功能。如果 'd' 被按下，我想移动 canvas 以便视口看到不同的东西。

到目前为止，将 canvas 右移的函数如下所示：

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

其中 imageSearch 函数更新 canvas。更新和加载等工作正常，我只是不知道如何移动 canvas。提前致谢，将不胜感激。

编辑：

这是 1j01 为我修复的 JSFiddle：jsfiddle。net/jujhp0yv/1

但是canvas还是没有动，所以我还在等你的回复:)

Answer 1

尝试将视口存储在变量中。

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

然后，在绘制循环/渲染函数的开始，保存 canvas 状态并转换为视口。

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）

I want to make a viewport for a canvas game