目录
1.引言
最近工作中对HTML页面特效有一些需求，于是在工作之余就找了一些封装的非常酷眩的JS动画API。其中paperJS就是一个能够让人眼前一亮，紧接着再一亮，最后眼前一黑的“好用”动画API。这里是他的官网：paperJS官网。在官网中paperJS自称为是一把处理矢量图形脚本的“Swiss Army Knife(瑞士军刀)”，足见其功能与信心的强大。在官网实例http://paperjs.org/examples/中提供的特效已经能让我们交出膝盖，但是事实上实例中所提供的展示功能尚不足paperJS全部功能的冰山一角，所以越是深入了解paperJS就越会喜欢这把锋利的刀具。
然而，注意我对这个非常好用的工具API用了“眼前一黑”的修饰方式。我这里并不是想要表达一种亮瞎眼的程度来夸奖它，而是指这么一个优秀的动画API居然 没有汉化教程！没有汉化教程！没有汉化教程！是的，重要事情说三遍。反正至少我在各种我所已知的途径中我没有找到相对完整权威的教程，只有一些非常零散的使用心得。但是没有中文教程其实这也不是什么问题，毕竟人家官网也都说了这个API对于初学者来说也是非常容易简单的...
...简单个锤子啊！一点都不简单好吗？如果相比于学习2400w行开源内核的谷歌浏览器难度来说，的确paperJS好简单啊！但是初学者没有这个功力啊！难道是我太笨了所以感觉一点都不简单吗？居然除了JavaScript脚本之外还要自己写paperScript脚本好吧啦？！
OK回归正题。其实客观来讲paperJS的逻辑的确并不复杂，只不过为了完成一些特效有时逻辑并不是最重要的，可能还需要一些空间思维和动画创造力。所以下面我们通过一个最简单的官方案例剖析（整个案例跟随学习过程大约需要1~2个小时左右），来一起感受体验一下paperJS。后续我也会继续深入学习paperJS，争取能够尝试让每一个初学者对这个好用的工具都能用的得心应手。毕竟说实话，这样好用的工具不可多得。
2.基本描述
paper.js框架是一个基于canvas运行的开源图形脚本框架，这意味着我们在使用paper.js的时候并不需要任何额外的框架依赖，直接下载paper.js框架文件就可以进行特效的编辑了。
另外，通过框架中提供的API我们可以快速的构建出符合我们需求的矢量图形与贝塞尔曲线，并将他们付诸于各种动画效果。幸运的是这些API都是十分语义化的。
3.开始使用
相信大部分人看到这个简洁的首页时候都会懵逼一下的，我也不例外（懵逼原因是感觉画风不对）。但是仔细看就会发现左侧边的菜单其实还是蛮明确的。对于初学者可以先看看【Examples（实例）】来感受一下paper.js的犀利和各种特效，然后我们在开始着手准备构建我们自己的案例。相信我，这很有必要！因为看过之后你才能更好的感受他的酷炫。
OK差不多了，我们进入正题吧。
3.1.入门
首先点击【Tutorials（教程）】进入paper.js的官方教程，然后在页面右边的【Getting Started】下方点击【Working with paper.js】进入基本说明位置。
在进入页面后会有一些文字描述，感兴趣可以去看一下详细内容（推荐自己翻译，毕竟有时候机翻不准）。不过如果你不想花大把时间，那看我总结的也可以：
- paper.js框架引入方式和普通js脚本引入方式没什么区别，script标签走起即可
- paper.js脚本却必须在<script type="text/paperscript" canvas="页面canvas标签id属性值"></script>样式的脚本内部编辑
- paper.js框架的导出对象为paper，并且在paperScript内部编辑的时候并不需要考虑全局作用域污染的问题
- paper.js框架内提供的API与系统API并不冲突，并且在paperScript内部可以随意使用像window、document这类系统API
基本就这四点了解一下就可以。然后继续看下面提供给我们的具体实例。
具体案例脚本代码如下，注释我都尽量给翻译过来了。
<!DOCTYPE html>
<html>
<head>
<!-- 加载 Paper.js 库文件 -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- 定义paperscript脚本， 并作用于页面id值是xxx的canvas标签 -->
<script type="text/paperscript" canvas="myCanvas">
// 创建一个paper.js中的“Path”对象，并准备在Path对象中绘制图形
var path = new Path();
// 设置Path对象的画笔颜色
path.strokeColor = 'black';
// 设置Path对象的画笔初始落笔点
var start = new Point(100, 100);
// 设置Path对象的画笔运动轨迹
path.moveTo(start);
// 设置Path对象沿运动轨迹绘制线条
path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>整个案例的目的和作用就是从(100,100)坐标点向(200,50)坐标点绘制一条黑色的线。看起来和canvas标签的基本使用差不多：获取canvas对象、获取上下文、设置起始点、设置画笔色、绘制线条...事实的确就是这样的。不过结合上下文内容，在这个最最基础的案例中我们知道了paper.js在绘制过程中一个重点：paper.js必须先创建一个path，然后才能通过对path操作来完成绘制。path就好比是HTML中的一个标签，cocos中的一个精灵。
3.2.基础构建
对于paper.js，在官网中于我们初学者来说需要了的内容到这里就足够了！其余的内容暂时不需要考虑，过多的信息反而不利于新内容的学习。如果真的在后续学习中有用到什么，直接过来查询即可。现在让我们开始动手制作第一个paper.js的基础案例吧。
首先下载paper.js框架文件，直接在侧边栏【Download】内下载即可，当然npm、bower或者直接download都可以。（我这里为了便于初学者理解和使用，选择了最基础的框架文件下载而没有使用npm。）
最低0.47元/天 解锁文章
2793
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
