可以使用 HTML5 进行等距透视 <canvas> ？与setTransform ？还是以另一种方式存在？
例子:
ctxt.setTransform (1, -0.2, 0, 1, 0, 0);
类似于 Farmville 的视角。
非常感谢。
最佳答案
您可以在 Canvas 上绘制您想要的任何内容，直至单个像素，因此任何诸如“是否可能”之类的问题都会得到"is"的回答。
如果你的意思是如果 3d 管道已经内置在 Canvas 中，答案是否定的， Canvas 上下文是 2d，所以命令是 2d。 Canvas 元素实际上支持完整的 3d 管道(webgl ) 但这是非常低的级别，旨在提供对 GPU 的访问权限(更具体地说是为了表示当前硬件的工作方式)； “高级”抽象 API 是 2d。您可以设置一个 2d 矩阵，使您的方形绘图命令看起来像等轴测 View ，但您将无法在该平面上方或下方绘制任何东西，因为高级命令仅处理 2d 坐标。
您当然可以使用标准的 3d->2d 映射技术在 Canvas 2d 上下文中进行 3d 渲染(等距或透视)。参见示例 this 4k demo仅使用 Canvas 2d 上下文和 javascript(如果您的浏览器不支持 HTML5，则为 here is a youtube video)。
对于等距 View ，矩阵设置部分更简单......例如
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 是 Canvas 上下文，将设置一个矩阵:
- XY 旋转 Angular 为
angle1 - 视角倾斜 Angular 为
angle2 - 映射长度为 1 到 100 像素
- 将 (0, 0) 映射到 200, 200
您可以看到这些公式的一个小例子 on this example page .
关于javascript - 你能用 HTML5 <canvas> 做等距透视吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5186013/