文档章节

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

李朝强
 李朝强
发布于 2013/10/24 13:22
字数 381
阅读 878
收藏 8

         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的画布
varpaper = Raphael(10, 50, 320, 200);
 
// 在坐标(x = 50, y = 40)绘制半径为 10 的圆
varcircle = 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

© 著作权归作者所有

李朝强
粉丝 90
博文 297
码字总数 149962
作品 0
郑州
产品经理
私信 提问
加载中

评论(1)

吕猛
吕猛
mark
使用javascript实现跨浏览器绘图相关..

HTML里DOM的canvas对象可以画出各式各样的2D 3D图象,甚至游戏.但IE不支持这个对象,微软不想让javascript太强大. 可以通过SVG/VML+JS模拟canvas来实现跨浏览器的矢量图形实现方案. 这其实和网...

喔喔兒
2011/04/10
341
0
Raphael 1.4 发布,小型JavaScript库

Raphael是一个小型JavaScript库,用于简化您的Web矢量图形工作。如果你想创建自己特点的图表或图形的裁剪和旋转部件,你可以使用这个简单方便的库来实现。 Raphael是目前最好的,使用javaScr...

红薯
2010/05/11
433
0
Web 开发中的矢量绘图处理和应用

矢量绘图一直是 Web 开发中一直比较薄弱的环节。本文首先针对不同浏览器详细阐述不同的矢量绘图解决方案,其中包括 HTML5 Canvas、SVG 以及 VML 等技术;之后针对每种不同的技术介绍其实现和...

IBMdW
2011/09/03
2.1K
0
Web开发中的矢量绘图(vml,svg)处理和应用

前言 1991 年物理学家 Tim Berners-Lee 首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展,HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 ...

kevin_pang
2014/02/25
478
0
前端框架、前端工具记录(更新中....)

一、工具 前端工具库:http://www.w3cfuns.com/tools.php DCloud - HBuilder :http://www.dcloud.io Webstorm:http://www.jetbrains.com/webstorm/ easyicon图标:http://www.easyicon.net......

Liem_
2016/03/05
909
0

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部