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页面，然后简单的使用它即可：
// 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");
画布[ ]
首先必须创建一个画布，因为所有的将来将被调用绘制的方法将被绑定到这个画布上.
参数:
- container （HTML元素 或者 string型）
- width （number型）
- height （number型）
或者：
- x （number）
- y （number）
- width （number）
- height （number）
用法：
// 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"
}]);
绘制圆[ ]
参数：
- x （number） X坐标中心
- y （number） Y坐标中心
- r （number） 半径
用法：
var c = paper.circle(50, 50, 40）；
绘制矩形[ ]
参数：
- x （number） X轴左上角坐标
- y （number） Y轴左上角坐标
- width （number）
- height （number）
- r （number） 圆角半径[可选]，默认为0
用法：
// regular rectangle var c = paper.rect(10, 10, 50, 50); // rectangle with rounded corners var c = paper.rect(40, 40, 50, 50, 10);
绘制椭圆形[ ]
参数：
- x （number） X坐标中心
- y （number） y坐标中心
- rx （number） 水平半径
- ry （number） 垂直半径
用法：
var c = paper.ellipse(50, 50, 40, 20