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

HTML5 Canvas scaling/zooming a viewbox of a larger 2D world?

本文关键字：缩放 2D 世界 视图 Canvas HTML5      更新时间：2023-09-26

我正在努力学习如何使用画布，这样我就可以在业余时间尝试创建web应用程序和web游戏。我喜欢你可以在页面上画物体的功能。无论如何，我想知道如何让画布变得相当大，然后放大到某一点，然后随着玩家动态移动这个视框。我也想知道如何实现放大和缩小。

我想说的是如何创建一个像http://www.agar.io/这样的2D"世界"

我似乎有问题是，我可以创建画布占用整个页面，但我如何设置它，使画布显示另一个更大的世界的一部分?并且可以像取景器一样在这个更大的世界里动态地移动。

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

目前我将使用HTML5画布，JS &jQuery的画布实验，还有其他的事情我应该知道吗?

谢谢你的帮助。

任何应用程序的'Camera'都只是绘图上下文。假设你有你的:

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

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

下面是一个JSFiddle来解释相机的移动:https://jsfiddle.net/0o2nsc18/

要移动摄像机，在输出窗口内单击，并使用箭头键移动摄像机。

关于滚动背景，看一下这个教程，它会给你一个如何使用滚动的想法。你可以把它修改成你想要的任何方式，例如，当播放器向上推时，背景会随着播放器的移动而向上移动。

缩放，我相信你正在寻找缩放命令。

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

这样可以直接缩放图像而不是画布。该代码片段将按x缩放图像的宽度和高度。看看这篇文章。

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

在这里看看一些关于缩放，旋转和其他你可能会发现对制作游戏有用的东西。

相关文章：