你能用Paper.js做什么？
现在已经有很多利用HTML5的JavaScript框架。
Paper.js是这些框架其中一个，它以容易理解的方式使用DOM构造对象。它提供了在支持<canvas>标签的web浏览器上以创造性和优雅的方式做大量操作。它也提供了一种新的和有趣的方式画矢量图形。
基本的安装如下：
<script src="js/paper.js" type="text/javascript"></script>
<script src="js/main.js" type="text/paperscript"></script>
<canvas id="draw" width="100%" height="100%" resize="true"></canvas>
psper.js被包含在你加入你的代码文件"type='text/paperscript'"之前，通过canvas元素的id去画以确保你的代码文件包含使用paper.js所有的类和功能能使用。
那么Paper.js到底能做什么呢？
1、使用预定义图形
Paper.js允许你使用不同维度预定义图形和创建线段。例如，下面的代码用“Circle”构造了圆形路径：
var myCircle = new Path.Circle(new Point(300, 70), 50);
myCircle.fillColor = 'black';
这个代码片段创建了一个黑色圆形，半径为50pts，圆心坐标x300，y为70。
为了创建一个长方形，像圆形相同的方式通过“Rectangle”构造器，代码如下：
var rectangle = new Rectangle(new Point(50, 50), new Point(150, 100));
var path = new Path.Rectangle(rectangle);
path.fillColor = '#e9e9ff';
path.selected = true;
2、创建交互
Paper.js支持拖放功能也支持键盘操作。下面演示一个在鼠标路径上画线段：
<!DOCTYPE HTML>
<html>
<head>
<script src="lib/paper.js" type="text/javascript"></script>
<script type="text/paperscript" canvas="draw">
// Create a new path once, when the script is executed:
var myPath = new Path();
myPath.strokeColor = 'black';
// This function is called whenever the user
// clicks the mouse in the view:
function onMouseDown(event) {
// If the path is empty, we need to add two segments
// to the path. The first one will stay put,
// and the second one will be moved while dragging.
if (myPath.segments.length == 0) {
myPath.add(event.point);
}
// Add a segment to the path at the position of the mouse:
myPath.add(event.point);
}
function onMouseDrag(event) {
// Move the last segment point of the path to the
// current position of the mouse:
myPath.lastSegment.point = event.point;
}
</script>
</head>
<body>
<canvas id="draw" width="100%" height="100%" resize="true"></canvas>
</body>
</html>
上面的代码允许你通过拖拉画线。
其他的鼠标处理功能当某个事件发生时能够被paper.js调用和触发。依赖于你想完成的哪种和什么级别的交互，你可以组合鼠标处理功能像event.point，event.downpoint 或 event.pressure 等能收到的不同有关鼠标事件对象
3、 创建动画
Paper.js通过调用“onFrame”handler来创建动画。像下面这样定义：
function onFrame(event) {
// Your animation code goes in here
}
动画的可以用onFrame handler创建包或旋转、移动，颜色效果和路径段动画等等
下面的代码创建并3度旋转顺时针方向的矩形
// Create a rectangle shaped path with its top left point at
// {x: 75, y: 75} and a size of {width: 75, height: 75}
var topLeft = new Point(75, 75);
var size = new Size(75, 75);
var path = new Path.Rectangle(topLeft, size);
path.strokeColor = 'black';
function onFrame(event) {
// Each frame, rotate the path by 3 degrees:
path.rotate(3);
}
下载paper.js：http://paperjs.org/download/
例子：
官方例子：http://paperjs.org/examples/
风吹蒲公英：http://zgrossbart.github.com/Dandelion/
Paper.js浏览器支持：需要Internet Explorer 9+, Firefox 4+, Safari 5+ or Chrome