Raphael一个用于在网页中绘制矢量图形的Javascript库


Posted in Javascript onJanuary 08, 2013

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。

Raphaël 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。
Raphael一个用于在网页中绘制矢量图形的Javascript库
如何使用?
在页面中引入 raphael.js 文件,然后就可以绘制任意的矢量图形了:

// 在坐标(10,50)创建宽320,高200的画布 
var paper = Raphael(10, 50, 320, 200); 
// 在坐标(x = 50, y = 40)绘制半径为 10 的圆 
var circle = paper.circle(50, 40, 10); 
// 给绘制的圆圈填充红色 (#f00) 
circle.attr("fill", "#f00"); 
// 设置画笔(stroke)的颜色为白色 
circle.attr("stroke", "#fff");
Javascript 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
详解Angular 4.x Injector
May 04 Javascript
原生JS实现不断变化的标签
May 22 Javascript
微信小程序的日期选择器的实例详解
Sep 29 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 #Javascript
jquery Mobile入门—外部链接切换示例代码
Jan 08 #Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 #Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 #Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 #Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
Jan 08 #Javascript
滚动图片效果 jquery实现回旋滚动效果
Jan 08 #Javascript
You might like
一个PHP分页类的代码
2011/05/18 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
纯JS实现根据CSS的class选择DOM
2014/03/22 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
2017/07/04 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
使用ECharts实现状态区间图
2018/10/25 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
小程序调用微信支付的方法
2019/09/26 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[52:41]OG vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/20 DOTA
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python动态文本进度条的实例代码
2020/01/22 Python
Python容器类型公共方法总结
2020/08/19 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2015年党建工作总结
2015/03/30 职场文书
教你用eclipse连接mysql数据库
2021/04/22 MySQL
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android