Raphael is a Javascript library for drawing vector graphics in web pages. It uses SVG W3C recommended standards and VML as the basis for creating graphics. You can operate the DOM through JavaScript to easily create various complex bar charts, pie charts, curve charts and other charts. You can also draw graphics of any shape. Perform complex operations such as cropping and rotating charts or images.
Raphaël is a cross-browser vector graphics library. Currently supported browsers include: Firefox 3.0, Safari 3.0, Chrome 5.0, Opera 9.5 and Internet Explorer 6.0.
How to use? Introduce the raphael.js file into the page, and then you can draw any vector graphics:
// Create a canvas with a width of 320 and a height of 200 at coordinates (10,50)
var paper = Raphael(10, 50, 320, 200);
// Draw a circle with a radius of 10 at coordinates (x = 50, y = 40)
var circle = paper.circle(50, 40, 10);
// Fill the drawn circle with red (#f00 )
circle.attr("fill", "#f00");
// Set the color of the stroke to white
circle.attr("stroke", "#fff");