可以使用HTML5做等轴测图 ？

Question

可以使用HTML5 <canvas>做一个等轴测透视图吗？是setTransform吗？还是存在另一种方式？

示例：

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

类似于Farmville的观点。

非常感谢。

Answer 1

如果您的意思是如果画布中已内置3d管道，则答案为否，画布上下文为2d，因此命令为2d。 Canvas元素实际上确实支持完整的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