时间紧张,先记一笔,后续优化与完善。
Raphael 是一个用于在页网中绘制矢量图形的 Javascript 库。它应用 SVG W3C 推荐标准和 VML 作为建创图形的基本,你可以通过 JavaScript 作操 DOM 来省力建创出各种庞杂的柱状图、饼图、曲线图等各种图表,还可以绘制恣意状形的图形,可以停止图表或图像的裁剪和旋转等庞杂作操。
您可能感趣兴的相干文章
- 经典的白富美型 jQuery 图片轮播件插
- 2012年佳最 Web 前端发开工具和框架
- 让人爱不释手的13套精巧页网标图素材
- 10套精巧的收费网站台后管理系统模板
- 心精挑选的秀优 jQuery Ajax 分页件插
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 中文帮助文档/中文参考手册/中文程教
编译起源:妄想空天 ◆ 存眷前端发开术技 ◆ 分享页网设计源资
文章结束给大家分享下程序员的一些笑话语录: 不会,Intel会维持高利润,也会维持竞争局面,国外的竞争不是打死对方的那种。你看日本有尼康,佳能,索尼,都做相机,大家都过得很滋润。别看一堆厂,其实真正控制的是后面的那几个财团——有些竞争对手,后面其实是一家人。