Pages

Monday, February 6, 2012

Raphael

       what is mean by Raphael :

Raphael is a small JavaScript library that should simplify your work with vector graphics on the web.
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.

How to use it?

Download and include raphael.js into your HTML page, then use it as simple as:


 Example:
         ve.html

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>LONI</title>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src='jquery-1.6.4.min.js'></script>
    <script type="text/javascript" src='raphael.js'></script>
</head>

<body>
    <div id="canvas"></div>
 
 
  <script type="text/javascript">
    $(function() {
      // Create the canvas
      var paper = Raphael( 0, 0, $("#canvas").width(), $("#canvas").height());

      // Use Canvas to Draw Circle
      var c = paper.circle(100, 100, 20)
      c.attr({fill: '#f00', stroke:'#000'})
    });
  </script>
 
 
</body>
</html>

style.css

#canvas{
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-color: silver;
  z-index: -1;
}

The output is:

                                   

No comments:

Post a Comment