你能用 HTML5 <canvas> 做一个等距透视图吗？

Question

可以用 HTML5 <canvas> 做等距透视吗？是setTransform？还是以其他方式存在？

例子：

ctxt.setTransform (1, -0.2, 0, 1, 0, 0);

类似于 Farmville 的视角。

非常感谢。

Answer 1

你可以在画布上绘制任何你想要的东西到单个像素，所以任何像“是否可能”这样的问题都会得到“是”的答案。

如果你的意思是如果 3d 管道已经内置在画布中，答案是否定的，画布上下文是 2d，所以命令是 2d。 画布元素确实支持完整的 3d 管道（webgl ) 但这是非常低级的，旨在提供对 GPU 的访问权限（更具体地说，旨在表示当前硬件的工作方式）； “高级”抽象 API 是 2d。您可以设置一个 2d 矩阵，使您的正方形绘图命令看起来像一个等轴测视图，但您将无法在该平面上方或下方绘制任何东西，因为高级命令只处理 2d 坐标。

您当然可以使用标准的 3d->2d 映射技术在画布 2d 上下文中进行 3d 渲染（等距或透视）。例如，this 4k demo 仅使用 canvas 2d 上下文和 javascript（如果您的浏览器不支持 HTML5，here is a youtube video 也一样）。

对于等角视图，矩阵设置部分更简单......例如

var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);
var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;
ctx.setTransform(a, d, b, e, c, f);

其中ctx 是一个画布上下文将设置一个矩阵：

• 的 XY 旋转角度为 angle1
• 具有angle2 的视角倾斜角度
• 映射长度为 1 到 100 像素
• 将 (0, 0) 映射到 200, 200

您可以查看这些公式的一个小示例on this example page。

Answer 2

制作等距游戏与其说是倾斜整个画布，不如说是关于您使用的图形。例如，瓷砖通常是 h=w/2。因此，在普通游戏中，您将拥有一个 32x32 的瓷砖，而在等距游戏中，您将使其成为 32x16。此外，瓷砖的位置也有些不同，以补偿角度。

简短回答是的，等距游戏完全可以使用画布。查看Freeciv 的示例。

另一个询问等距游戏创建细节的好地方是https://gamedev.stackexchange.com/