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)为 10var circle = paper.circle(50, 40, 10);// 填充 circle, 设置填充色为红色 red (#f00)circle.attr("fill", "#f00");// 设置圆圈画笔属性(stroke attribute)为白色(white)circle.attr("stroke", "#fff");
联系客服