强大的矢量图形库:Raphael JS 中文帮助文档及教程
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.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");
精彩示例:
- Raphaël Playground
- Reflection
- Image rotation
- Text rotation
- GitHub-a-like impact chart
- GitHub-a-like punch chart
- GitHub-a-like languages chart
- Raphaël Analytics chart
- Polar Clock
- Dynamic Spinner
- Australian Map
- Dancing Helvetica
- Multichart
- Animation
- Tiger
- Hand
- Interactive Chart
- Diagram
- Custom Fonts
- Animation Easing
- Gradients Example
- Curver
- Animation along the path demo
- 3D Shooter
- Colour Picker
- Growing Pie
- Bounce
- World Map
实用网站:
Raphael 官方网站地址:http://raphaeljs.com
Raphael 英文参考文档:http://raphaeljs.com/reference.html
Raphael 中文帮助文档:http://julying.com/lab/raphael-js/docs/
教程推荐:
Raphael 简介:HTML5 Rocks:Introduction to Raphaël.js
Raphael 新手入门教程:An Introduction to the Raphael JS Library
Raphael 绘制柱状图表:Creating a chart with raphael.js
强大的矢量图形库:Raphael JS 中文帮助文档及教程的更多相关文章
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- FullPage.js中文帮助文档API
fullPage.js的方法: 1. moveSectionUp() 功能:向上滚动一页. 2. moveSectionDown() 功能:向下滚动一页. 3. moveTo(section, sli ...
- Sencha Cmd 6 和 Ext JS 6 指南文档(部分官方文档中文翻译)
近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档 ( ...
- HighCharts/Highstock使用小结,使用汉化及中文帮助文档
此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts 版本:Highcharts-3.0.1 Hi ...
- Plupload上传插件中文帮助文档
Plupload上传插件中文帮助文档 配置参数 实例化一个plupload对象时,也就是 new plupload.Uploader(),需要传入一个对象作为配置参数.后面内容中出现的plupload ...
- Ext JS 6学习文档-第6章-高级组件
Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为 图片浏览器,它使用 tree 和 data view 组 ...
- Ext JS 6学习文档-第5章-表格组件(grid)
Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...
- Highcharts中文帮助文档
Highcharts中文帮助文档Highcharts 简介: Highcharts 是一个制作图表的 Javascript 类库,可以制作的图表有:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图. ...
- DecimalFormat 中的 # 与 0 的区别(中文帮助文档中翻译可能是错误的)
想对数字进行格式化的时候,可能会使用到 java.text.DecimalFormat 类.中文帮助文档中,有如下符号 位置 本地化 含义 0 数字 是 阿拉伯数字 # 数字 是 阿拉伯数字,如果不存 ...
随机推荐
- POJ 3617 Best Cow Line (贪心)
题意:给定一行字符串,让你把它变成字典序最短,方法只有两种,要么从头部拿一个字符,要么从尾部拿一个. 析:贪心,从两边拿时,哪个小先拿哪个,如果一样,接着往下比较,要么比到字符不一样,要么比完,也就是 ...
- WEB数据挖掘(十六)——Aperture数据抽取(9):数据源
One of the central concepts of Aperture is the notion of a DataSource. A DataSource contains all inf ...
- 【转】BitmapFactory.Options
BitmapFactory.Options这个类的信息:http://developer.android.com/reference/android/graphics/BitmapFactory.Op ...
- C10K problem
什么是C10K问题 1W个客户端连接上一个server,客户不定时的发送请求. I/O策略 软件架构 1.单线程解决多重I/O调用 不要使用阻塞/同步的调用,如果非要这么做,那就采用多进程或者 ...
- ie7下z-index失效问题解决方法(详细分析)
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-04-03) 点评:绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面 ...
- MySQL通配符过滤
在WHERE后使用LIKE操作符能够进行通配符过滤: products表例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1eWluZ18xM ...
- Codeforces Beta Round #75 (Div. 1 Only) B. Queue 线段树+二分
B. Queue Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 codeforces.com/problemset/problem/91/B Descrip ...
- 浅析C#基于TCP协议的SCOKET通信
TCP协议是一个基本的网络协议,基本上所有的网络服务都是基于TCP协议的,如HTTP,FTP等等,所以要了解网络编程就必须了解基于TCP协议的编程.然而TCP协议是一个庞杂的体系,要彻底的弄清楚它的实 ...
- java list三种遍历方法性能比較
从c/c++语言转向java开发,学习java语言list遍历的三种方法,顺便測试各种遍历方法的性能,測试方法为在ArrayList中插入1千万条记录,然后遍历ArrayList,发现了一个奇怪的现象 ...
- SAO总结
Application Structure Web App-------------------------------------------------------------->Serve ...