raphael.js矢量绘图（3）绘图方法 – Dx. Yang
在RaphaelJs里，用来绘制形状的方法不算多，比较容易掌握。
矩形
参数：x轴坐标，y轴坐标，宽度，高度
paper.rect(x, y, width, height);
圆形
参数：圆心的x轴坐标，y轴坐标，圆半径
paper.circle(x, y, r);
椭圆
参数：圆心的x轴坐标，y轴坐标，x轴半径，y轴半径
paper.ellipse(x, y, xr, yr);
路径
paper.path('M10,10 L20,20');
路径是矢量绘图里最强大的工具，同时也比较复杂。
路径的参数是一组字符串，由“命令字母+坐标数字”的组合构成。
具体设置方法可以参看另外几篇介绍：
路径详解1（基本）：http://xbingoz.com/171.html
路径详解2（曲线）：http://xbingoz.com/194.html
MDN路径教程：http://xbingoz.com/320.html
图片
image方法可以引入图片文件，和HTML里的img标签作用相似。
paper.image(src, x, y, width, height);
文字
RaphaelJs有两个方法用来绘制文字
1、paper.text(50, 50, "Raphaël\nkicks\nbutt!");
text方法用来绘制一般文字，和HTML里的文字一样，它只能使用浏览器支持的字体。
在字符串参数中加入\n可以输入多行文字
2、paper.print(10, 50, "print", paper.getFont("Museo"), 30);
print方法可以渲染任意字体的文字，它的第四个参数是字体，这里需要使用paper.getFont()方法，该方法接受一个字符串参数，表示需要获取的字体名称。只要该字体已在系统中注册，就可以获取，并使用它渲染文字。
图形对象
绘制形状的方法会返回形状对象，该对象可以使用show()、hide()等方法。
attr()是形状对象的一个常用方法，它可以改变形状对象的属性，例如：
|
1
2
3
4
5
6
7
8
9
10
|
//绘制一个矩形，左上角位于(10,10)，宽800，高600，黑色填充//这里可以使用链式操作paper.rect(10, 10, 800, 600).attr('fill', '#000');//或者用一个变量缓存形状对象，便于后续操作var rect1 = paper.rect(10, 10, 800, 600);rect1.attr('fill', '#000');setTimeout(function(){ rect1.attr('fill', 'red');},1000); |
RGraph - HTML5 and JavaScript charts
RGraph is a HTML5 canvas and JavaScript based library built for web charts and supports over twenty different types of visualisation. Using the new <canvas> tag, RGraph creates these "HTML charts" inside the web browser using JavaScript, meaning quicker pages and less web server load. This leads to smaller page sizes, lower costs and faster websites.
Gallery · mbostock/d3 Wiki · GitHub
Welcome to the D3 gallery! Feel free to add links to your work! More examples are available on bl.ocks.org/mbostock. If you want to share an example and don't have your own hosting, consider using Gist and bl.ocks.org.