你能用HTML5< canvas> ;?做一个等轴测透视吗？ [英] Can you do an isometric perspective with HTML5 <canvas>?
问题描述
可以使用HTML5 < canvas> 做一个等距透视吗？它是用 setTransform ？还是以另一种方式存在？
It is possible to do an isometric perspective with HTML5 <canvas>? It is with setTransform? Or does it exist another way?
示例：
ctxt.setTransform (1, -0.2, 0, 1, 0, 0);
像Farmville的视角。
Something like the perspective of Farmville.
非常感谢。
推荐答案
你可以在画布上绘制任何你想要的单个像素，是可能的将有一个是的答案。
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.
如果你的意思是如果一个3d流水线已经内置在画布上，答案是否，画布上下文2d，所以命令是2d。你可以设置一个矩阵，使你的方形绘图命令看起来像一个等轴视图，但你不能绘制任何高于或低于该平面。
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. You can set up a 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.
您当然可以使用标准的3d-> 2d映射技术在画布中进行3d渲染（等轴或透视）。请参见例如此4k演示，它仅使用画布/ javascript（这里是一个youtube视频，如果您的浏览器不支持HTML5）。
You can of course do 3d rendering (either isometric or perspective) in a canvas using standard 3d->2d mappings techniques. See for example this 4k demo that is using only canvas/javascript (here is a youtube video of the same if your browser doesn't support HTML5).
矩阵设置部分的等距视图更简单...例如
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);
其中 ctx 建立一个矩阵：
- XY旋转角度
angle1 - 的视角倾斜角度
angle2 - 映射的长度为1到100像素
- 将（0,0）映射到200,200
- 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
您可以看到这些公式的一个小例子此示例页面上的操作。
You can see a small example of these formulas in action on this example page.
这篇关于你能用HTML5< canvas> ;?做一个等轴测透视吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
