javascript 你能用 HTML5 <canvas> 做一个等距透视吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5186013/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you do an isometric perspective with HTML5 <canvas>?
提问by anvd
It is possible to do an isometric perspective with HTML5 <canvas>? It is with setTransform? Or does it exist another way?
可以用 HTML5 做等距透视<canvas>吗？它与setTransform? 或者它以另一种方式存在？
Example:
例子：
ctxt.setTransform (1, -0.2, 0, 1, 0, 0);
Something like the perspective of Farmville.
有点像法姆维尔的视角。
Thanks a lot.
非常感谢。
回答by 6502
You can draw whatever you want on the canvas down to the individual pixel, so any question like "is it possible" will have a "yes" answer.
你可以在画布上绘制任何你想要的东西到单个像素，所以任何像“是否可能”这样的问题都会有一个“是”的答案。
If you mean if a 3d pipeline is already built-in in the canvas the answer is no, canvas context is 2d so commands are 2d.Canvas elements do actually support a full 3d pipeline (webgl) but that is very low level and geared toward giving access to a GPU (more specifically is designed to represent how current hardware works); the "high-level" abstract API is instead 2d. You can set up a 2d matrix that will make your square-drawing commands looking like an isometric view, but you won't be able to draw anything above or below that plane as high-level commands only handle 2d coordinates.
如果您的意思是画布中已经内置了 3d 管道，那么答案是否定的，画布上下文是 2d，因此命令是 2d。Canvas 元素确实支持完整的 3d 管道 (webgl)，但这是非常低的级别，并且旨在提供对 GPU 的访问（更具体地说，旨在表示当前硬件的工作方式）；“高级”抽象 API 是 2d。您可以设置一个 2d 矩阵，使您的方形绘图命令看起来像等轴测视图，但您将无法在该平面上方或下方绘制任何内容，因为高级命令仅处理 2d 坐标。
You can of course do 3d rendering (either isometric or perspective) in a canvas 2d context using standard 3d->2d mappings techniques. See for example this 4k demothat is using only canvas 2d context and javascript (here is a youtube videoof the same if your browser doesn't support HTML5).
您当然可以使用标准的 3d->2d 映射技术在画布 2d 上下文中进行 3d 渲染（等距或透视）。例如，请参阅仅使用画布 2d 上下文和 javascript 的4k 演示（如果您的浏览器不支持 HTML5，则此处是相同的 youtube 视频）。
For an isometric view the matrix setting part is simpler... for example
对于等距视图，矩阵设置部分更简单......例如
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);
where ctxis a canvas context will set up a matrix that:
ctx画布上下文在哪里将设置一个矩阵：
- has an XY rotation angle of
angle1 - has a view tilt angle of
angle2 - maps a length of 1 to 100 pixels
- maps (0, 0) to 200, 200
- 有一个 XY 旋转角度
angle1 - 有一个视角倾斜角
angle2 - 映射长度为 1 到 100 像素
- 将 (0, 0) 映射到 200, 200
You can see a small example of these formulas in action on this example page.
您可以在此示例页面上看到这些公式的小示例。
回答by Loktar
Well to make an isometric game its not so much as skewing the whole canvas, its more about the graphics you use. For example the tiles are generally h=w/2. So in a normal game you'd have a tile thats 32x32 in an isometric game you'd make it 32x16. Also the placement of tiles is a bit different to compensate for the angle.
制作等距游戏与其说是倾斜整个画布，不如说是关于您使用的图形。例如，瓷砖通常是 h=w/2。因此，在普通游戏中，您将拥有一个 32x32 的图块，而在等距游戏中，您会将其设为 32x16。此外，为了补偿角度，瓷砖的放置也略有不同。
Short answer yes isometric games are fully possible using canvas. Look at Freecivfor an example of one.
简短的回答是，使用画布完全可以进行等距游戏。以Freeciv为例。
Another good place to ask on the specifics of isometric game creation would be https://gamedev.stackexchange.com/
另一个询问等距游戏创建细节的好地方是https://gamedev.stackexchange.com/
