如何使用?
在页面中引入 raphael.js 文件,然后就可以绘制任意的矢量图形了:
1
2
3
4
5
6
7
8
9
10
11
|
// 在坐标(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