Raphael is a Javascript library for drawing vector graphics in Web pages. It uses the SVG recommendation Standard and VML as the basis for creating graphics, you can easily create a variety of complex bars, pie charts, graphs and other diagrams through JavaScript operation DOM, you can also draw any shape of the graph, can be a chart or image cropping and rotation and other complex operations
Rapha?l is a cross-browser vector graphics library that currently supports browsers including: Firefox 3.0+,safari 3.0+,chrome 5.0+,opera 9.5+ and Internet Explorer 6.0+
How do I use it?
Introduce the Raphael.js file to the page, and then you can draw any vector graphics.
// Create a canvas with a width of 320 and a height of 200 in coordinates (10,50) var paper = Raphael (Ten, 40, 10, +// in coordinates (x = ten, y =) to draw a circle Var with a radius of $ Circ Le =paper.circle (+, +// ) fills the drawn circle with red (#f00)circle.attr ("Fill", "#f00" The color of the set Brush (stroke) is white circle.attr ("Stroke", "#fff");
Wonderful example:
- Rapha?l Playground
- Reflection
- Image rotation
- Text rotation
- Github-a-like Impact Chart
- Github-a-like Punch Chart
- Github-a-like Languages Chart
- Rapha?l Analytics Chart
- Polar Clock
- Dynamic Spinner
- Australian Map
- Dancing Helvetica
- MultiChart
- Animation
- Tiger
- Hand
- Interactive Chart
- Diagram
- Custom Fonts
- Animation easing
- Gradients Example
- Curver
- Animation along the path demo
- 3D shooter
- Colour picker
- Growing Pie
- Bounce
- World Map
Useful website:
Raphael official website address: http://raphaeljs.com
Raphael English Reference Document: http://raphaeljs.com/reference.html
Raphael Chinese help document: http://julying.com/lab/raphael-js/docs/
Tutorials Recommended:
Raphael Introduction: HTML5 rocks:introduction to Rapha?l.js
Raphael Novice Beginner Tutorial: An Introduction to the Raphael JS Library
Raphael Drawing histogram: Creating a chart with Raphael.js