...

View Full Version : canvas/js 2d perspective transform



ereignis
07-13-2011, 11:04 AM
not sure if this is the right place to ask canvas questions, but if it is, i'm trying to program a game like air hockey (with some twists). it works pretty well now but the table is viewed from overhead, and i would prefer to show the game from the player's perspective, as in the pic, without having to rewrite my existing code. anyone know of any js libraries or formulas which can accomplish this?

http://s3.amazonaws.com/satisfaction-production/s3_images/137342/air-hockey-game_inline.jpg

devnull69
07-13-2011, 11:09 AM
I never actually tried this, but I can refer you to http://stackoverflow.com/questions/5186013/can-you-do-an-isometric-perspective-with-html5-canvas



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);

ereignis
07-13-2011, 11:17 AM
not looking for isometric though... way too many resources on that...

rnd me
07-13-2011, 10:12 PM
use css transforms to skew the canvas element...
css3 should work in all the same places as canvas.


https://developer.mozilla.org/en/css/using_css_transforms

ereignis
07-14-2011, 01:20 AM
awesome! not aware of these, probably cos i'm usually developing for the least common denominator of browsers and css3 is like a faraway dream...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum