Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。

Raphael是跨浏览器的矢量图形库,目前支持的浏览器包括:Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+以及Internet Explorer 6.0+。

官网地址:http://raphaeljs.com/

英文帮助文档:http://raphaeljs.com/reference.html

中文帮助文档:http://lab.wangyuanwai.com/raphael-js/docs/

学习之前,先看下一些例子:

Raphael Playground

Reflection

Image rotation

Test rotation

Github-a-like impact chart

Github-a-like punch chart

Github-a-like languages chart

Raphael Analytics chart

Polar Clock

Dynamic Spinner

Australian Map

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

svg―Raphael.js Library(一)的更多相关文章

  1. svg―Raphael.js Library

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用SVG W3C推荐标准和VML作为创建图形的基础,可以通过JavaScript操作DOM来轻松创建出各种复杂的柱状图.饼图. ...

  2. 强大的矢量图形库:Raphael JS 中文帮助文档及教程

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...

  3. svg绘图工具raphael.js的使用

    1.raphael.js svg画图的开源库,支持IE8+ 官方api: http://dmitrybaranovskiy.github.io/raphael/reference.html Githu ...

  4. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译(一)

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  5. Raphael Js矢量库API简介:

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  6. Javascript实战开发:教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  7. 使用 SVG 和 JS 创建一个由星形变心形的动画

    序言:首先,这是一篇学习 SVG 及 JS 动画不可多得的优秀文章.我非常喜欢 Ana Tudor 写的教程.在她的教程中有大量使用 SVG 制作的图解以及实时交互 DEMO,可以说教程的所有细枝末节 ...

  8. raphael.js 给元素 hover 添加glow() 外发光

    用raphael.js 给 svg画布里面添加个元素,嗯就圓好了,男人一般都喜欢圆形的东西,比如xx ,  xxx , 还有xxx $(document).ready(function() { var ...

  9. 【js类库Raphaël】使用raphael.js根据点坐标绘制平滑曲线

     一.可供参考的文档资料. raphaeljs官网:http://raphaeljs.com/ w3c关于path的介绍:http://www.w3.org/TR/2003/REC-SVG11-200 ...

随机推荐

  1. 【洛谷P3258】松鼠的新家

    很好的一道题 LCA+树上前缀和 sum数组是前缀和数组, 分类讨论一下, 1.访问到一个点p1,若下一个点p2需要往儿子下面找的话,那么lca就是这个点p1,则sum[p1]--; sum[p2]+ ...

  2. linux 安装jdk,tomcat 配置vsftp 远程连接

    不知不觉入行也有一年了,这两天在公司上班有空了就自己装了个vmware虚拟机,装了个红帽6.1完全命令行的操作系统,想着搭个公司现在在用的测试环境,没想到中间碰到了很多问题,不过大部分都解决了,现在可 ...

  3. 【Visual Lisp】Visual Lisp属性与方法

    说明:Visual Lisp属性的获取.赋值和方法的执行有多种形式.然而对于初学者来说一次性就要全部掌握显然是没有必要的,有时候每种方法都是通用的功能都一样我们就没有必要把所有方法都记住.我们只需要掌 ...

  4. wordnet的一些入门性介绍

    关于wordnet的介绍很多,中英文都有,我这里主要是参考了别人的.自己组织了一下. 1.简介 1.1关于词典 Wordnet是一个由普林斯顿大学认识科学实验室在心理学教授乔治·A·米勒的指导下建立和 ...

  5. JQuery学习(表单对象属性)---checked

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. CodeIgniter nginx 404

    默认情况下CI 不支持路由模式需要在server里面配置,配置成如下即可: server { listen 80 ; server_name wechat.XX.com.cn; root XX; in ...

  7. node-webkit教程(8)Platform Service之Clipboard

    node-webkit教程(8)Platform Service之Clipboard 文/玄魂 目录 node-webkit教程(8)Platform Service之Clipboard 前言 8.1 ...

  8. ViEmuVS2013-3.2.1 破解

    VS升级到2013后,作为一个Vimer,自然需要更新最新的ViEmu插件,因为现在离了Vim,写代码已经寸步难行了. ViEmu 3.2.1的破解其实和Viemu 3.0.13的破解方法一样.安装前 ...

  9. nginx upstream模块--负载均衡

    Module ngx_http_upstream_module英文文档 upstream模块相关说明1.upstream模块应放于nginx.conf配置的http{}标签内2.upstream模块默 ...

  10. win系统下nodejs安装及环境配置

    第一步:下载安装文件下载nodejs,官网:http://nodejs.org/download/,我这里下载的是node-v0.10.28-x86.msi,如下图: 第二步:安装nodejs下载完成 ...