问题
It is possible to do an isometric perspective with HTML5 <canvas>? It is with setTransform? Or does it exist another way?
Example:
ctxt.setTransform (1, -0.2, 0, 1, 0, 0);
Something like the perspective of Farmville.
Thanks a lot.
回答1:
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. 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.
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);
where ctx is a canvas context will set up a matrix that:
- 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.
回答2:
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.
Short answer yes isometric games are fully possible using canvas. Look at Freeciv for an example of one.
Another good place to ask on the specifics of isometric game creation would be https://gamedev.stackexchange.com/
来源：https://stackoverflow.com/questions/5186013/can-you-do-an-isometric-perspective-with-html5-canvas