Javascript 对SVG和 VML的封装

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");

效果演示

raphael-demo

作者提供了许多效果演示,包括图像阴影、图片旋转、文本旋转、GitHub图表效果模拟、冲床图、饼状图、数据分析图表、漂亮的时钟图、动态指示器、地图图形、舞动字体、动画、交互图表、流程图、自定义字体、缓冲效果、渐变效果、贝塞尔曲线、路径动画、三维场景、颜色选择器等等。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值