Javascript 我想为画布游戏创建一个视口

所以我有一个游戏（更像是一张地图），它加载一堆瓷砖并将它们放在一起。瓦片加载很好，但我想移动视口。我已经研究过这个问题，我有一个检查键盘的功能。如果按下“d”，我希望移动画布，以便视口看到不同的内容

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

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

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

其中imageSearch函数更新画布。更新，加载等工作正常，我只是不知道如何移动画布。如蒙帮助，将不胜感激

编辑：

这里有一个1j01为我修复的JSFIDLE:JSFiddle.net/jujhp0yv/1

---

画布仍然没有移动，因此我仍在等待您的响应：）

尝试将视图端口存储在变量中

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

然后，在绘制循环/渲染函数的开头，保存画布状态并转换到视图端口

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

如果希望

view.x

和

view.y

表示视图的中心，请按如下方式翻译：

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

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

在“绘制循环/渲染”函数结束时，恢复状态，使平移不会叠加

ctx.restore();

---

现在，您应该能够修改

view.x

和

view.y

来移动视图。（例如，

view.x+=5

）

我添加了您的建议，并将画布移动到右上角。我删除了你的建议，但没有改变。你知道刚才发生了什么吗？对不起，我的错，我无意中删除了CSS文件中的某些内容。我将再次尝试您的更改，如果它不起作用，我将给您一个JSFIDLE。啊，请看您在每次重画时都将瓷砖作为新图像加载，而这不会同步发生，因此，当图像刚刚开始加载时，会调用

ctx.restore（）

，因此在绘制图像时仍会重置。现在，您可以通过将保存/转换/恢复移动到绘制图像的位置（

onload

）来解决眼前的问题，但您不希望在每次重画时都加载图像。你想要的是将图像保存在一个像2d数组一样的数据结构中。我不能实际测试这个，因为没有任何东西可以加载，但是所有的平铺加载都很好，你的方法很聪明（非常感谢），但是我仍然不能很好地移动画布。