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

Question

可以用HTML5做等距视角<canvas>吗？它与setTransform？还是以另一种方式存在？

例:

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

像Farmville的观点.

非常感谢.

Answer 1

您可以在画布上绘制任何想要的内容,直到单个像素,因此任何像"是否可能"这样的问题都会有"是"的答案.

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

您当然可以使用标准的3d-> 2d映射技术在画布中进行3D渲染(等距或透视).例如,请参阅仅使用canvas/javascript的此4k演示(如果您的浏览器不支持HTML5,则此处是相同的youtube视频).

对于等轴测视图,矩阵设置部分更简单......例如

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

您可以在此示例页面上看到这些公式的一个小示例.