Wednesday, July 8, 2009
Raphaël—JavaScript Library: vector graphics on the web
Wednesday, July 8, 2009 
1 Comments
I received a cool message from a friend of mine to go and check out the Raphaël—JavaScript Library. What is it? Here are the introductory paragraphs from their website:
It's as easy to implement as this. Include the raphael.js into your page and start having fun like so:
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0
It's as easy to implement as this. Include the raphael.js into your page and start having fun like so:
// Creates canvas 320 × 200 at 10, 50There are plenty of demos to check out at the site, it looks pretty interesting to say the least.
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");
Labels: Javascript, Vector