Javascript HTML5画布缩放/缩放更大2D世界的视口？

我正在努力学习如何使用画布，以便在业余时间尝试创建网络应用程序和网络游戏。我喜欢你能在页面上画物体。无论如何，我想知道如何使画布相当大，然后放大到某个点，然后用播放器动态移动这个视口。我也想知道如何实现放大和缩小

我想说的是，我怎样才能创造一个二维的“世界”，就像

我似乎遇到的问题是，我可以创建画布来占据整个页面，但是如何设置它，使画布显示另一个更大世界的一部分呢？在这个更大的世界里，它可以像取景器一样动态移动

我曾尝试过谷歌搜索，但在寻找缩放时，大多数事情都与缩放其他设备的画布及其分辨率有关

目前，我将使用HTML5Canvas、JS和jQuery来试验canvas，还有什么我应该知道的吗

---

谢谢你的帮助。

关于滚动背景，看看这个，它会让你知道如何使用滚动。您可以将其修改为您想要的任何方式，例如，当玩家向上推时，背景将向上移动，无论玩家移动什么

对于缩放，我相信您正在寻找缩放命令

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 100, 100);
ctx.scale(x,y);

通过执行此操作，可以直接缩放图像，而不是画布。代码片段将按x缩放图像的宽度和高度。看看这个

---

看看有关缩放、旋转和其他对制作游戏有用的东西。

任何应用程序的“相机”都只是绘图上下文。假设你有你的：

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");

可以使用

translate（）

方法移动视图

下面是一个JSFiddle来解释摄像机的运动：

---

要在小提琴中移动相机，请在输出窗口内单击并使用箭头键移动相机。

您好，这些资源非常有用，但您能给我举一个使用scale（）命令的示例吗？我似乎无法让它工作，我认为这与重新绘制有关..？看看本教程，看看这里，您可以直接自己尝试。您好，这是非常好的信息，您的JSFIDLE正好显示了我想要的内容，理想情况下，我希望有一个占据整个页面大小的网格，然后进行翻译。我正试图这样做，但我无法让它发挥作用。我已经添加了鼠标事件并尝试了setInterval函数，但似乎没有任何效果，我已经有了画布和上下文变量。谢谢你的帮助。是的，这就是我想要的，但我希望网格在所有方向上都能到达边界，就像在agar.io上一样。我不知道当它被翻译时它是如何被重画的，因为这意味着你不是真的在翻译。您正在移动，然后重新绘制新视图，但它如何知道您转换到的新视图将是什么样子？

canvas = document.getElementById("canvas");
context = canvas.getContext("2d");