Raphael是一个轻巧的Javascript类库,用于简化处理web上的矢量图形。如果你想创建图表、图片裁剪以及图片旋转等图形应用,用Raphael类库可以轻松的实现。
Raphael基于SVG(W3C建议标准)和VML绘制图形,这意味着你绘制的图形也是DOM对象,所以可以注册Javascript事件或者随时修改它们。Raphael的目标是提供跨浏览器并且易于使用的矢量图绘制接口,目前支持Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+以及Internet Explorer 6.0+。
如何使用
下载raphael.js文件并在页面中引入,然后就可以非常简单的使用它了:
// 在坐标(10, 50)处绘制320×320的画布 var paper = Raphael(10, 50, 320, 200); // 在坐标(50, 40)处绘制半径为10的圆形 var circle = paper.circle(50, 40, 10); // 填充圆形红色背景 circle.attr("fill", "#f00"); // 设置圆形的线条颜色为白色 circle.attr("stroke", "#fff");
效果演示
作者提供了许多效果演示,包括图像阴影、图片旋转、文本旋转、GitHub图表效果模拟、冲床图、饼状图、数据分析图表、漂亮的时钟图、动态指示器、地图图形、舞动字体、动画、交互图表、流程图、自定义字体、缓冲效果、渐变效果、贝塞尔曲线、路径动画、三维场景、颜色选择器等等。