Use Raphael to Draw (a) basic graphics (JavaScript)

Source: Internet
Author: User
Tags vector graphics library

What is Raphael?

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 to use Raphael:

By introducing the Raphael.js file in the page, you can then draw any vector graphics:

To start creating a view area:

var paper = Raphael ("mydiv", 580, 600); // Create a View  area
<id= "mydiv"></div>

Next, you can draw a graphic.

1, Draw the circle:

var c = paper.circle (50, 89, 40); // Draw a circle (X,y,r), R represents the radius  of the circle

2, Draw the rectangle:

var r = Paper.rect (100, 19, 80, 50,10); // Draw Rectangle (x,y,width,height,r), R for rectangle fillet, default to 0

3, Draw ellipse:

var e = paper.ellipse (50, 159, 40, 20); //

4, picture

var i = paper.image ("Heffalump.png", 200, 19, 80, 80); //

5,text:

var t = paper.text (where\n amazing\n happens! "); // text  

6, Path:

var p = Paper.path ("M10 10L 110 100"); //

7,set: Several graphs are merged together to facilitate unified management, as I understand.

var st = Paper.set (); // Set        St.push (           paper.circle (),           paper.circle(310, ())  ;  
Raphael Download

Http://files.cnblogs.com/kt520/DmitryBaranovskiy-raphael-v2.0.1-2-g2b0c5a2.zip

Use Raphael to Draw (a) basic graphics (JavaScript)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.