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.
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>
#canvas{
position: absolute;
top: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: silver;
z-index: -1;
}
The output is:
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 includeraphael.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:
