简介

Raphaël 是一个小型的 JavaScript 类库,能极大地简化web上的矢量图(vector graphics)处理. 如果想要创建自定义的图表或图像产品,以及旋转组件， 那么，通过Raphaël可以很方便地实现这些需求.

Raphaël ['ræfeɪəl] 兼容 SVG W3C 推荐标准, 使用 VML 作为创建图形的标准 . 也就是说,Raphael中创建的所有对象都对应了 DOM 对象, 所以可以在创建时添加 JavaScript 事件处理器(event handlers), 也可以在稍后加上. Raphaël 的目标是更加优雅和便捷地创建矢量图,成为一个跨浏览器的适配器.

Raphaël 现在兼容 Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ 以及 Internet Explorer 6.0+ 以及其他(与他们同样内核)浏览器.

 使用说明

下载后在 HTML 页面中引入 raphael.js, 就可以像下面这样使用了: 

// 创建一块画布(canvas,在 Raphael 中一般称为 paper,画纸)
// 左上角坐标点: 10, 50,宽高为 320 × 200 
var paper = Raphael(10, 50, 320, 200);

// 在paper上绘制圆形(circle)
// 坐标点 x = 50, y = 40, 半径(radius)为 10
var circle = paper.circle(50, 40, 10);
// 填充 circle, 设置填充色为红色 red (#f00)
circle.attr("fill", "#f00");

// 设置圆圈画笔属性(stroke attribute)为白色(white)
circle.attr("stroke", "#fff");

 示例: