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的语言特性分析
Apr 11 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
javascript中拼接HTML字符串的最快、最好的方法
2014/06/07 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
python分割文件的常用方法
2014/11/01 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
shell的种类有哪些
2015/04/15 面试题
自动一体化专业求职信
2014/03/15 职场文书
网站创业计划书
2014/04/30 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
银行求职信范文
2019/05/13 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers