4 ms·
Drawing in html without using canvas, svg or vml
- dw0rm 18y agoIts 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.
- halo 18y agoWould it be emulate the canvas tag seemlessly for browsers that don't support it such as IE?
- dw0rm 18y agoI 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.
- SingAlong 18y agoIE and or any old browsers can support canvas tag when you use ExplorerCanvas http://code.google.com/p/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 http://sourceforge.net/project/showfiles.php?group_id=163391
- bd 18y agoWait, 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://meyerweb.com/eric/css/edge/slantastic/demo.html http://infimum.dk/HTML/slantinfo.html http://infimum.dk/HTML/slantinfo.html (check also links from there) http://infimum.dk/HTML/rasterTriangleDOM.html http://infimum.dk/HTML/rasterTriangleDOM.html
- dw0rm 18y agoAlso please check this link: http://www.uselesspickles.com/triangles/demo.html 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)
- axod 18y agoHaving 1 div per scanline for a circle is going to get pretty memory hungry and slow.
- dw0rm 18y agoCircle is made of trapezoids, it takes 18 divs to draw the circle from the page.
- axod 18y agoah 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.
- dw0rm 18y agoNice idea, I will try to see if its possible to implement it
- jcl 18y agoYou can use characters to draw, and it's cross-platform, too: http://nedbatchelder.com/blog/200805/css_homer_animated.html http://nedbatchelder.com/blog/200805/css_homer_animated.html (Not that I'd recommend it.)
- dw0rm 18y agoI 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/ 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
- kwamenum86 18y agoNovelty script. Now I know you can make slanted borders though.
- dw0rm 18y agoI 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 :)
- tlrobinson 18y agoFun, but not particularly practical.