Question

可以使用HTML5 <canvas>进行等角透视吗？这是setTransform？还是以另一种方式存在？

示例：

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

类似于Farmville的观点。

非常感谢。

Answer 1

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

如果你的意思是如果画布中已经内置了3d管道，则答案为否，画布上下文为2d，因此命令为2d。您可以设置一个矩阵，使您的方形绘图命令看起来像等轴测视图，但您将无法在该平面的上方或下方绘制任何内容。

当然，您可以使用标准的3d-＆gt; 2d映射技术在画布中进行3D渲染（等长或透视）。例如，如果您的浏览器不支持HTML5，请参阅this 4k demo仅使用canvas / javascript（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/

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

2 个答案: