做一个基本的矢量数据处理工具，方便后期数据生产较为自动化，选用node.js作为批量数据处理的脚本工具，暴露服务接口，前端调用，canvas按照图层要素渲染。
Rapha_l是一个小型JavaScript库，可以简化网络上矢量图形的工作。例如，如果要创建自己的特定图表或图像裁剪并旋转窗口小部件，则可以使用此库轻松轻松地实现它。Rapha_l使用SVGW3C建议书和VML作为创建图形的基础。这意味着您创建的每个图形对象也是DOM对象，因此您可以附加JavaScript事件处理程序或稍后对其进行修改。拉斐尔(Rapha_l)的目标是提供一种适配器，使跨矢量浏览器的图形矢量艺术兼容且容易。
这里介绍一种简单的编译达到同样的强大效果的动画制作：计算机喜欢干净简洁。不管是报表，统计，或者函数曲线，他们总是使用简洁明了的线条；而现实是，所有物理世界的物体是混沌的。树叶离开枝丫，水珠四溅 ，花朵迎风摇曳 － 所有这些物理世界的互动感觉简单，因为我们已经习惯这些。但是实际上哪怕是那一霎那的风，都是混沌的，她的算法非常复杂。这篇文章里面，我们要制作蒲公英种子微风舞动的动画。
(Image: Arnoldius)
动画制作的蒲公英没有办法模拟物理的复杂性，实际上她看上去更加自然如果我们不试图去模拟。我们将要制作一朵给你同样感觉的花朵但是省略了很多细节。
Paper.js
使用 canvas 标签 制作简单图形. 创建你的canvas:（宽：300，高：300）
1
2
<canvas id="canvas" width="300" height="300"></canvas>
//加入JavaScript:
1
2
//定义二维动画
var canvas = $('#canvas')[0].getContext("2d")
1
2
3
4
5
6
7
8
9
// 05－06：圆心x＝100，圆心y＝100, 半径＝15，初始角度＝0，结束＝360。,反时针。
canvas.beginPath()
canvas.arc(100, 100, 15, 0, Math.PI*2, true)
// 结束
canvas.closePath()
// 填色
canvas.fill()
掌握canvas的基本就很容易做这些，但是如果你要制作更加复杂的东西，你需要高级编译语言像Paper.js
Paper.js 是一个 JavaScript库用来制作绘图和动画， 一种Adobe Illustrator使用的基于Scriptographer的脚本语言 . 它自称是“矢量图脚本语言中的瑞士军刀”（ “The Swiss Army Knife of Vector Graphics Scripting,” ），其中重点突出矢量。
图形制作中有两种：矢量图和栅格图。栅格图就像你照相机拍出来的图片，如果你放大看，就是颜色填充的方格。矢量图是有点连线组成的。他们是不同的线条租和形状组，根据不同的指令绘图。如果用矢量图，如图，这个Z放大后还是线条光滑，色泽饱满。相比较，左边的栅格图就很模糊了。
