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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 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获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
Python面向对象实现方法总结
2020/08/12 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
中国跨境电商:Tomtop
2017/03/16 全球购物
护理专业自我鉴定
2014/01/30 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
咖啡店创业计划书
2014/08/15 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
导游词之河北野三坡
2019/12/11 职场文书
MySQL详细讲解变量variables的用法
2022/06/21 MySQL