javascript - Perspective rendering in HTML5 Canvas - Stack Overflow

admin管理员组

文章数量:1293970

I want to draw a perspective grid on canvas, something like this: .html My best so far looks like this: / I don't exactly like it, I want it to look more realistic. So my question is: is there some library or something else that could render my grid in perspective if I only drew it flat. I have fair understanding of Javascript, so it doesn't have to be a plete spoon-feeding, just need to be pointed to the right direction at least.

I want to draw a perspective grid on canvas, something like this: http://www.shutterstock./pic-9039343/stock-photo-abstract-horizon-grid-perspective.html My best so far looks like this: http://modwebsolutions./test/ I don't exactly like it, I want it to look more realistic. So my question is: is there some library or something else that could render my grid in perspective if I only drew it flat. I have fair understanding of Javascript, so it doesn't have to be a plete spoon-feeding, just need to be pointed to the right direction at least.

• javascript
• html
• canvas

Share Follow asked Apr 20, 2011 at 20:20 CaballeroCaballero 12.1k2222 gold badges105105 silver badges169169 bronze badges 2

• 1 Your test looks pretty realistic to me. What more were you looking for? Background images? – sdleihssirhc Commented Apr 20, 2011 at 20:27
• Well, I want the grid to look more like that picture, but somehow I can't get the math to work. – Caballero Commented Apr 21, 2011 at 18:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Yes, you can draw things flat and have them rendered in perspective. There's a bit of math to the ordeal but nothing insane.

This should get you going:

http://tulrich./geekstuff/canvas/perspective.html

本文标签： javascriptPerspective rendering in HTML5 CanvasStack Overflow