Drawing in html without using canvas, svg or vml(old.etoleto.com)

24 pointsby dw0rm18 yıl önce15 comments

old.etoleto.com

Drawing in html without using canvas, svg or vml

http://old.etoleto.com/divcanvas/

15 comments

dw0rm18 yıl önce

Its a well known technique (using border slants), though I enjoyed to implement it by myself as a simple drawing class that works in major browsers. What I want to know, is where it can be used (or maybe it is useless?), and what should I add or change.

bd18 yıl önce

Wait, you can make slanted borders?

This is cool, I didn't know. I googled around and found some more:

http://meyerweb.com/eric/css/edge/slantastic/demo.html

http://infimum.dk/HTML/slantinfo.html (check also links from there)

http://infimum.dk/HTML/rasterTriangleDOM.html

dw0rm18 yıl önce

Also please check this link: http://www.uselesspickles.com/triangles/demo.html (I found it after I implemented my algorithm) I use the same method to draw triangles, but a bit more simplified (requires 1 div less per triangle)

halo18 yıl önce

Would it be emulate the canvas tag seemlessly for browsers that don't support it such as IE?

SingAlong18 yıl önce

IE and or any old browsers can support canvas tag when you use ExplorerCanvas http://code.google.com/p/explorercanvas/

So IE not supporting canvas tag 'officially' isn't really a problem.

EDIT: Just found that ExplorerCanvas has a new home at soundforg. Download here http://sourceforge.net/project/showfiles.php?group_id=163391

dw0rm18 yıl önce

I doubt the possibility of emulating canvas tag in ie using this technique, because its very limited compared to canvas (for example, its not possible to draw lines).

This technique can bring cross-browser support of drawing polygons.

axod18 yıl önce

Having 1 div per scanline for a circle is going to get pretty memory hungry and slow.

dw0rm18 yıl önce

Circle is made of trapezoids, it takes 18 divs to draw the circle from the page.

axod18 yıl önce

ah true. Still, having 61 DIVs in the canvas in that example is a fair number.

Still cool though. How about using ● for a circle and scaling the font. I expect you'd have to do some calculations on each platform to adjust for font differences etc, but could work.

dw0rm18 yıl önce

Nice idea, I will try to see if its possible to implement it

jcl18 yıl önce

You can use characters to draw, and it's cross-platform, too:

http://nedbatchelder.com/blog/200805/css_homer_animated.html

(Not that I'd recommend it.)

dw0rm18 yıl önce

I should know what font to use, that is available in all operating systems. And how to properly scale and position the character.(should check how the size and position of the character depends on the size of the font)

Manually tried to align them: http://old.etoleto.com/c1/ (orange circles are of text, transparent blue ones of divs) I'm not sure if i should use this instead of divs - being able to select them as text annoys

kwamenum8618 yıl önce

Novelty script. Now I know you can make slanted borders though.

dw0rm18 yıl önce

I can make a nice library out of this scratch. Or maybe create a repo and host it somewhere. But only if i know that people will use it :)

tlrobinson18 yıl önce

Fun, but not particularly practical.