Canvas 视口

Question

创建一个 Agar 克隆，它现在非常有效，但我想改进它，如果玩家离开屏幕，屏幕会跟随他们，这是通过视口完成的。唯一的问题是我不知道该怎么做。我尝试了 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

您使用翻译来设置原点。在 canvas 或关闭的位置，坐标 X = 0，y = 0 是。

您的角色正在一个比 canvas 大很多倍的游戏世界中游荡。您还有许多其他物品和玩家，每个人在游戏世界中都有自己的坐标..

渲染它的一种方法是...对于游戏中的每个项目，找到您与原点的距离，并在绘制它们时从每个项目中减去该距离。然后在屏幕中央绘制您自己的角色。但这很慢，并且每个 item/player.

都需要所有额外的数学运算

所以让硬件来完成转换。变换包含尺度 (x,y)、旋转 (ang) 和平移（原点偏移）。每次在 canvas 上绘制一个对象时，都会对其应用转换矩阵，您无法避免，它必须发生。所以如果你不利用它来发挥你的优势，它就浪费了。

使用方法 您的运动场在左上角 -10,000,-10,000 像素到右下角 10,000, 10,000 像素。每个人在地图上的这些数字之间都有一个位置，包括您的播放器，可能在 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 像素处。

现在你不必乱弄任何人的坐标，只需将它们渲染到它们所在的位置，你只用一行代码就移动了游戏中的所有内容。它根本不会减慢您的游戏速度，因为始终会应用转换，您只需确保它按照您的意愿进行即可。

在每一帧的开始附近设置变换，在你更新你的位置之后，一切都会跟随你的角色。

Canvas 视口

Canvas viewport

html

javascript

canvas

viewport