HTML5 Canvas 缩放/缩放更大 2D 世界的视图框？答案

【问题标题】：HTML5 Canvas scaling/zooming a viewbox of a larger 2D world?HTML5 Canvas 缩放/缩放更大 2D 世界的视图框？
【发布时间】：2015-07-21 14:53:55
【问题描述】：

我正在尝试学习如何使用画布，以便在业余时间尝试创建网络应用程序和网络游戏。我喜欢你可以在页面上绘制对象的事实。无论如何，我想知道如何使画布变得非常大，然后放大到某个点，然后随着播放器动态移动这个视图框。我也想知道如何实现放大和缩小。

我想说的几乎是如何在http://www.agar.io/ 上创建一个二维“世界”

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

我尝试过 google 搜索，但在寻找缩放时，大多数事情都是为其他设备及其分辨率缩放画布。

目前我打算使用 HTML5 画布、JS 和 jQuery 来试验画布，还有什么需要了解的吗？

感谢您的帮助。

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

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

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

您可以使用translate() 方法移动您的视图。

这是一个解释相机运动的JSFiddle：https://jsfiddle.net/0o2nsc18/

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

【讨论】：

嗨，这是很好的信息，您的 JSFiddle 准确地显示了我想要的内容，理想情况下，我希望有一个占据页面全尺寸的网格，然后将其翻译。我正在尝试这样做，但我无法让它发挥作用。我已经添加了鼠标事件并尝试了您的 setInterval 函数，但似乎没有任何效果，我已经有了画布和上下文变量。感谢您的帮助。
是的，这就是我想要的，但我希望网格在所有方向上都有边界，就像在 agar.io 上一样。我无法理解它在翻译时是如何重绘的，因为这意味着你并没有真正翻译。您正在移动然后重新绘制新视图，但它如何知道您翻译的新视图会是什么样子？

【解决方案2】：

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

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

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

您可以通过这样做直接缩放图像而不是画布。代码 sn-p 将图像的宽度和高度缩放 x。看看这个post。

var w = value;
var h = value;
var x = scale;
ctx.drawImage(img, 0, 0, w/x, h/x);

查看here 了解有关缩放、旋转和其他可能对制作游戏有用的内容。

【讨论】：

您好，这些资源很棒，但是您能再给我一个使用 scale() 命令的例子吗？我似乎无法让它工作，我认为这与重新绘制有关..？
看看这个教程link看看这个editor你可以直接自己试试