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 相关文章推荐
常用一些Javascript判断函数
Aug 14 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
CI框架表单验证实例详解
2016/11/21 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
对于this和$(this)的个人理解
2013/09/08 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python操作日期和时间的方法
2014/03/11 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
干部下基层实施方案
2014/03/14 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
党委班子对照检查材料
2014/08/19 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
戒赌保证书
2015/05/11 职场文书