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");

精彩示例:

  实用网站:

  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 中文帮助文档及教程的更多相关文章

  1. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  2. FullPage.js中文帮助文档API

    fullPage.js的方法: 1. moveSectionUp() 功能:向上滚动一页. 2. moveSectionDown() 功能:向下滚动一页. 3. moveTo(section, sli ...

  3. Sencha Cmd 6 和 Ext JS 6 指南文档(部分官方文档中文翻译)

    近期组织了几个程序员网友,正在翻译一部分官方的Sencha Cmd 6 和 Ext JS 6 指南文档. 眼下还没翻译完,大家能够先看看 Sencha Cmd 6 和 Ext JS 6 指南文档  ( ...

  4. HighCharts/Highstock使用小结,使用汉化及中文帮助文档

       此文档是本人在开发过程图形报表时使用HighCharts所遇到的问题及解决方案 .最后附上有HighCharts中文帮助文档 HighCharts  版本:Highcharts-3.0.1 Hi ...

  5. Plupload上传插件中文帮助文档

    Plupload上传插件中文帮助文档 配置参数 实例化一个plupload对象时,也就是 new plupload.Uploader(),需要传入一个对象作为配置参数.后面内容中出现的plupload ...

  6. Ext JS 6学习文档-第6章-高级组件

    Ext JS 6学习文档-第6章-高级组件 高级组件 本章涵盖了高级组件,比如 tree 和 data view.它将为读者呈现一个示例项目为 图片浏览器,它使用 tree 和 data view 组 ...

  7. Ext JS 6学习文档-第5章-表格组件(grid)

    Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...

  8. Highcharts中文帮助文档

    Highcharts中文帮助文档Highcharts 简介: Highcharts 是一个制作图表的 Javascript 类库,可以制作的图表有:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图. ...

  9. DecimalFormat 中的 # 与 0 的区别(中文帮助文档中翻译可能是错误的)

    想对数字进行格式化的时候,可能会使用到 java.text.DecimalFormat 类.中文帮助文档中,有如下符号 位置 本地化 含义 0 数字 是 阿拉伯数字 # 数字 是 阿拉伯数字,如果不存 ...

随机推荐

  1. CodeForces 709C Letters Cyclic Shift (水题)

    题意:给定一个字符串,让你把它的一个子串字符都减1,使得总字符串字典序最小. 析:由于这个题是必须要有一个字串,所以你就要注意这个只有一个字符a的情况,其他的就从开始减 1,如果碰到a了就不减了,如果 ...

  2. C语言的struct/union字节对齐

    C语言的一大优势就是对内存空间的控制,当然,一般情况下对于开发人员来说都是透明的.看一个始终困扰初学者的问题:字节对齐! 先看四个重要的基本概念:1.数据类型自身的对齐值:对于char型数据,其自身对 ...

  3. java(2014)实现对mysql数据库分页的代码

    package util; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultS ...

  4. 解决window8 下连接PLSQL 报ora-12154错误

    操作系统版本:window8 64位企业版 数据库:oracle10g2 安装PLSQL,登录PLSQL报ORA-12154错误. 首先:所以需要下载一个32位客户端,我同时也下载了64位客户端,具体 ...

  5. 免费的天气Web Service接口

    免费的天气Web Service接口 在android应用当中很多时候需要获取天气的信息,这里提供怎么获取天气信息: 1. http://www.ayandy.com/Service.asmx?wsd ...

  6. yum update Transaction Check Error

    update系统时,发现其中一台server居然提示: Transaction Check Error:file /usr/lib/perl5/5.8.8/CGI.pm from install of ...

  7. Spring 常用工具类

    1) 请求工具类 org.springframework.web.bind.ServletRequestUtils //取请求参数的整数值: public static Integer getIntP ...

  8. C++运算符重载的规则

    运算符重载的规则如下: 1.C++中的运算符除了少数几个之外,全部可以重载,而且只能重载C++中已经有的运算符. 2.重载之后运算符的优先级和结合性都不会改变 3.运算符重载是针对新类型数据的实际需要 ...

  9. GLSL实现Simple Displace Mapping 水仿真流体绘制 【转】

    http://blog.csdn.net/a3070173/archive/2008/11/20/3342062.aspx Dislace Mapping其实就是在顶点着色器中 对顶点进行置换偏移,经 ...

  10. Xcode常见的编译、运行等错误的解决

    Xcode常见的编译.运行等错误的解决 项目没找到Info.plist的错误 The solution for this particular instance of the error was “I ...