javascript - Canvas 视口(viewport)

Question

这个问题已经有答案了:

HTML5 Canvas camera/viewport - how to actually do it? (7 个回答)

已关闭 7 年前。

创建琼脂克隆，现在它几乎可以工作，但我想通过使其改进，以便如果玩家离开屏幕，屏幕会跟随他们，这是通过视口(viewport)完成的。唯一的问题是我不知道该怎么做。我尝试了 ctx.translate() 但这只是导致了一些奇怪的东西。 (当然，我使用的是常规背景，而且我听说它需要实际图像才能工作，但我也不知道如何做到这一点，所以......)这是我的 jsFiddle 。初始化 Canvas 相关变量:

var canvas = document.createElement("canvas");
canvas.width = innerWidth;
canvas.height = innerHeight;
canvas.style.display = "none";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");

Answer 1

您使用平移来设置原点。坐标 X = 0、y = 0 位于 Canvas 上或 Canvas 外。

你的 Angular 色正在一个比 Canvas 大很多倍的游戏世界中徘徊。您还有许多其他元素和玩家，每个元素和玩家在游戏世界中都有自己的坐标。

渲染此效果的一种方法是...对于游戏中的每个项目，找到距原点的距离，并在绘制每个项目时减去该距离。然后在屏幕中央绘制您自己的 Angular 色。但这很慢，并且需要为每个项目/玩家进行所有额外的数学计算。

所以让硬件来完成转换。变换保存尺度 (x,y)、旋转 (ang) 和平移(原点偏移)。每次在 Canvas 上绘制一个对象时，都会将变换矩阵应用于它，您无法避免它，它必须发生。因此，如果您不利用它来发挥自己的优势，那么它就只是浪费了。

如何使用它。您的游戏区域是左上角 -10,000,-10,000 像素到右下角 10,000, 10,000 像素。每个人在 map 上都有一个位于这些数字之间的位置，包括你的玩家，可能在 5,000、6,000 像素处。如果您ctx.drawImage(playerImage,5000,6000)图像将不会出现，它的方式是 Canvas 的右下角，但您希望他位于屏幕的中心。

为此，请移动原点(当前位于 Canvas 的左上角 (0,0))，以便 5000,6000 出现在中心。

var playerX = 5000;  // your position
var playerY = 6000;
var screenWidth = 1920;  // size of the screen
var screenHeight = 1080;
var originX = 0;   // where the origin is
ver originY = 0

要使自己居中，请移动原点，使其减去您的位置。

originX -= playerX;
originY -= playerY;

现在您位于 Canvas 的左上角，但您想要中心。因此，将其向后移动屏幕尺寸的一半。

originX += screenWidth/2;
originY += screenHeight/2;

将所有内容合并为一个。假设原点始终为 0,0，您将得到

originX = -(playerX-screenWidth/2);
originY = -(playerY-screenHeight/2);

现在您已经有了可以放入翻译中的数字。

但是如果将其直接放入变换矩阵中会更好，并且实际上不需要原始变量。

就这样一步到位。

ctx.setTransform(1,0,0,1,-(playerX-screenWidth/2),-(playerY-screenHeight/2));

现在，当您在以下位置绘制玩家时

ctx.drawImage(payerImage,5000,6000);

您出现在 Canvas 的中心。坏人在5500，6200平局

ctx.drawImage(enemyImage,5500,6200);

将出现在 Canvas 上距您向右 500 像素、向下 200 像素的位置。

现在，您不必弄乱任何人的坐标，只需将它们渲染到原来的位置即可，只需一行代码即可移动游戏中的所有内容。它根本不会减慢你的游戏速度，因为变换总是被应用，你只需确保它按照你想要的方式运行。

在更新位置后，在每帧开始时设置变换，一切都会跟随您的 Angular 色。