Raphaël is a small JavaScript library released under the MIT License that helps with creating and playing with vector graphics on the web.
Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Once you include raphael.js in your HTML file, try the following example. Once that displays on screen, click on the black box which shows up to see how the onclick function on box1 works.
// Creates canvas 320 × 200 at 1, 1 var paper = Raphael(1, 1, 320, 200); // Create a regular rectangle var box1 = paper.rect(15, 15, 30, 30); //Set the box fill to black box1.attr("fill", "#000"); // Set the box stroke color to white box1.attr("stroke","#fff"); // create a rounded rectangle var box2 = paper.rect(10, 10, 100, 50, 10); // set box2's fill to grey box2.attr("fill", "#ddd"); //Bring Box1 to the foreground box1.toFront(); //Attach a onclick function to box1 to change the color of the box // to blue when clicked box1[0].onclick = function () { box1.attr("fill", "blue"); }; |
Links:
Raphaël Home Page
Documentation
Related articles by Zemanta
Thomas on February 15, 2009
This new library is impressive. Although there are a few bugs (which is completely understandable at this point), the base feature set is very well designed and implemented. I think this library will have a very bright future, since it fills the previously-huge gap between HTML and vector graphics.
Jazzmenn on June 3, 2011
What do you mean “Once you include raphael.js in your HTML file”? I am trying to use dreamweaver to build a page and I keep getting blank white pages every time I use Raphael JS codes. Am I linking to the .js wrong?
Vinu Thomas on June 7, 2011
You’ll have to include the javascript by using the following with in the and tags in your HTML page