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. yii2.0 gii

    1.添加模型 ./yii-dev gii/model --tableName=tableName --generateLabelsFromComments --ns='app\models\base' ...

  2. QT输入输出(一) 之 QDataStream 测试

    QT提供了两个高级别的流类---QDataStream和QTextStream,可以从任意的输入输出设备读取或写入数据. QDataStream用于读写二进制数据,它的优点是:在读写数据的时候已经严格 ...

  3. 什么是双线双IP,什么叫双线双IP

    双线双IP实现双线路,拥有中国电信.中国网通骨干网的接入,在该机房托管的服务器,实现了电信和网通的双线路接入,使电信和网通的用户都能以非常快的速度连接到服务器,解决了电信和网通互相访问速度慢的问题.这 ...

  4. 气泡形提示控件grumble.js

    grumble.js 是一个很特别的气泡形状提示控件,最开始是为 Huddle.com 网站开发的, 它没有通常的north/east/south/west的定位限制. 任何一个grumble都可以放 ...

  5. uoj #118. 【UR #8】赴京赶考 水题

    #118. [UR #8]赴京赶考 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://uoj.ac/problem/118 Description ...

  6. Android 中View的绘制机制源代码分析 三

    到眼下为止,measure过程已经解说完了,今天開始我们就来学习layout过程.只是在学习layout过程之前.大家有没有发现我换了编辑器,哈哈.最终下定决心从Html编辑器切换为markdown编 ...

  7. 財哥面京东dm的经历【帮財哥发的】

        关于面京东,感触仅仅有一个,虐的快吐血了.首先说京东分四个板块,有京东商城.京东金融.京东刚收购的拍拍和海外事业部.我这个职位主要是在金融部数据组做数据挖掘和机器学习,还有推荐系统.面试是在周 ...

  8. NGUI ERROR:UnityException: Sprite is not rectangle-packed. TextureRect is invalid.解决

    在使用Ngui 3.4.9的时候,使用“Unity 2D Sprite”控件的时候,出现了UnityException: Sprite is not rectangle-packed. Texture ...

  9. [Angular2 Router] Using snapshot in Router

    In the application, we have heros list, when click each hero, will redirect to hero detail view. Tha ...

  10. [AngularJS] Best Practise - Module

    Module definitions Angular modules can be declared in various ways, either stored in a variable or u ...