Monday, December 11th, 2006
Drawling lines in JavaScript
If you have ever wondered how to use the Bresenham algorithm to draw lines in browsers, it is your lucky day.
The article teaches us the way, and you end up with an API such as:
JAVASCRIPT:
-
-
var g = new Graphics();
-
g.drawLine(100,50,200,70);
-
g.paint();
-
3.4 rating from 34 votes
Someone figured it out before:
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
I used this lib last year, it just plain rocks. It works extremely well and does a great job, fast and cross-browser. What else to ask?
While jsgraphics does work, it’s not fast at all unless you’re using it for the simplest graphic elements. The current best way to draw lines is to use the canvas API and get IE support using the google excanvas.
A few years ago, I wanted to animate some 3D objects in wireframe in JavaScript. Bresensham wasn’t fast enough and lead to an unpleasant tag soup. So I came up with a slightly less accurate but much faster technique:
http://www.p01.org/articles/DHTML_techniques/Drawing_lines_in_JavaScript/
p01! haven’t seen you around in a while, man. :)
(Listen to this guy – he’s very smart.)
The main advantage of using s to draw graphics is it is more portable than the canvas methods. I’ve been experimenting with graphics for some time and have developed a library which I have used in a drawing application here… http://www.webreference.com/programming/javascript/gr/column22/index.html
I agree. Walter Zorn’s is fantastic.
Anyway.. one thing JS should not be used for is graphics. Can’t print it, can’t copy and paste it.. it’s just stuck there.
Wow p01, your implimentation hardly uses any code at at. I love it!
Its so much simpler wow. I am floored.
It’s risky to do pixel graphics in JavaScript, like it’s bad to do pixel graphics in Java or other language that don’t optimize the process. Some years ago I build a JavaScript plotter for mathematical functions. I had to wait some minutes to create a 200×200px image. You should not use JavaScript to do this.
You should use SVG graphics although the browser with the blue E does not support this. This is a case you should use upcoming standards.
Is there a live demo?
hi,
I think Walter Zorn’s graphing package is fantastic
i hope you don’t mind me submitting a query – i am trying to create animation where lines are drawn with 2 second delays (a form of animation) – my code is as follows:
var jg = new jsGraphics(’Canvas’);
jg.setColor(’maroon’);
jg.drawLine(40,130,80,120);
setTimeout(’jg.paint()’,10000);
jg.drawLine(80,120,120,110);
setTimeout(’jg.paint()’,10000);
it draws everying thing at the same time i.e the setTimeout doesn’t work – any ideas ?
thanks
Abbey
As a leading certification study materials provider, Pass4sure enjoys a wide range of reputation among the IT certification aspirations. Pass4sure offers variety of product forms, as software, hardcopy, video, E-Zine and so on. Some promotions and marketing strategy are adopted recently like its Points for gift and Affiliate Program, as a sign of extension of its business.The Most Popular exams List :EC0-350JN0-522 352-001 JN0-532 640-816 350-029 352-001 312-50 642-892 TK0-201 642-901 132-S-900.7BH0-006 350-018 650-621 646-230 HP0-S21 642-975 NS0-163 642-971 642-415 640-863 640-802 Click Passforsure to get more information!