编辑“Raphaël”

'''Raphaël'''是一个小型的 [[JavaScript]] 库，用来简化在页面上显示矢量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。

==简介==
Raphaël使用SVG的[[W3C]]建议书并且以[[VML]]为基础创建图形。这意味着每一个创建的图形对象同时也是一个[[DOM]]对象，所以你可以将其与[[JavaScript]]事件处理程序相连接并且修改它们。Raphaël的目标是提供一个适配器，可以使绘制矢量艺术变得简单并兼容不同的[[浏览器]]。

Raphaël目前支持[[Firefox]] 3.0 +，[[Safari]] 3.0以上，[[Chrome]] 5.0 +，Opera 9.5以上及[[Internet Explorer]] 6.0 +.

==使用==
Raphaël的使用非常简单。下载并包含raphael.js到您的[[HTML]]页面，然后简单的使用它即可：
<pre>// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");</pre>

===画布===
首先必须创建一个画布，因为所有的将来将被调用绘制的方法将被绑定到这个画布上.

'''参数''':
*container （HTML元素 或者 string型）
*width （number型）
*height （number型）
或者：
*x （number）
*y （number）
*width （number）
*height （number）

'''用法'''：
<pre>// Each of the following examples create a canvas that is 320px wide by 200px high
// Canvas is created at the viewport’s 10,50 coordinate
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
    type: "rect",
    x: 10,
    y: 10,
    width: 25,
    height: 25,
    stroke: "#f00"
}, {
    type: "text",
    x: 30,
    y: 40,
    text: "Dump"
}]);</pre>

===绘制圆===
[[Image:Circle.jpg|right]]
'''参数'''：
*x （number） X坐标中心
*y （number） Y坐标中心
*r （number） 半径

'''用法'''：
 var c = paper.circle(50, 50, 40）；

===绘制矩形===
[[Image:rectangle.jpg|right]]
'''参数'''：
*x （number） X轴左上角坐标
*y （number） Y轴左上角坐标
*width （number）
*height （number）
*r （number） 圆角半径[可选]，默认为0

'''用法'''：
<pre>// regular rectangle
var c = paper.rect(10, 10, 50, 50);
// rectangle with rounded corners
var c = paper.rect(40, 40, 50, 50, 10);</pre>

===绘制椭圆形===
[[Image:ellipse.jpg|right]]
'''参数'''：
*x （number） X坐标中心
*y （number） y坐标中心
*rx （number） 水平半径
*ry （number） 垂直半径

'''用法'''：
 var c = paper.ellipse(50, 50, 40, 20

==相关条目==
*[[jQuery]]
*[[MooTools]]

==参考来源==
*http://raphaeljs.com
*http://www.oschina.net/p/raphael

[[category:JavaScript|J]]
[[category:JavaScript框架|J]]