简单的说，p5.js是一个js类库；canvas是一个html5新增的一个元素，"canvas" 即 "画布", 此元素是为了客户端矢量图形而设计的。它自己没有行为，却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。两者要想绘图，都需执行js代码。仔细看p5的初始代码，
function setup() {createCanvas(400, 400)//为html页面创建canvas元素
}
两者的本质都是通过js来实现canvas的表现，p5.js与jquery库无异，将一些常用的功能需求的代码进行封装，以实现代码的简化。也就是任何p5.js可实现的，通过纯canvas的js api都能实现，不过要想实现，往往牺牲得是时间与效率。而p5.js提供了一种仅需少量代码就能实现很炫酷的操作的方法。两者渲染速度比较，理论上应该是一样的，毕竟大家殊途同归嘛，都是通过js来实现的，只要纯js写的足够优化，是会比p5.js快一丢丢的，差异不明显。明显的差异是p5.js在网页加载时需要下载p5.js的类库才能进行操作，而canvas api由于是客户端提供的原因，则不需要。
这里介绍一种简单的编译达到同样的强大效果的动画制作：计算机喜欢干净简洁。不管是报表，统计，或者函数曲线，他们总是使用简洁明了的线条；而现实是，所有物理世界的物体是混沌的。树叶离开枝丫，水珠四溅 ，花朵迎风摇曳 － 所有这些物理世界的互动感觉简单，因为我们已经习惯这些。但是实际上哪怕是那一霎那的风，都是混沌的，她的算法非常复杂。这篇文章里面，我们要制作蒲公英种子微风舞动的动画。
(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放大后还是线条光滑，色泽饱满。相比较，左边的栅格图就很模糊了。
下面我们介绍一些比较常见的Javascript框架，高手跳过，才学JS和ajax的朋友则应该好好了解一下。jQuery
jquery是一个快速、简洁的JavaScript框架，帮助你简化查询DOM对象，处理事件，制作动画，和处理Ajax交互过程。利用jQuery将改变你编写JavaScript代码的方式。原先用20行代码完成的功能，jQuery用10行就可以轻松搞定。
Dojo
Dojo 是一个强大的面向对象JavaScript框架。主要由三大模块组成：Core、Dijit、DojoX。Core提供 Ajax，events，packaging，CSS-based querying，animations，JSON等相关操作API。Dijit是一个可更换皮肤，基于模板的WEB UI控件库。DojoX包括一些创新/新颖的代码和控件：DateGrid，charts，离线应用，跨浏览器矢量绘图等。
YUI(Yahoo! User Interface Library)
Yahoo! User Interface (YUI) Library是一组采用DOM scripting，Dhtml和Ajax等技术开发的Web UI控件和工具。中文说过来就是“Yahoo用户界面库”。
•Yui 工具包利用DOM脚本来简化浏览器内的开发（in-browser devolvement），使用DHTML和AJAX的特性开发所有的Web程序。
•YUI控件库为你页面提供一组高交互性性的可视化元素。这些元素完全在客户端创建维护，不需要请求服务器进行页面刷新。
Mootools
MooTools 是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。 Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对完善，功能更强大，比如增加了动画特效、拖放操作等等。
prototype
prototype是一个易于使用、面向对象的JavaScript框架。它封装并简化和扩展一些在Web开发过程中常用到JavaScript方法与Ajax交互处理过程。
script.aculo.us
script.aculo.us 是一个易于使用，支持多种浏览器，用于增强Prototype的JavaScript框架。script.aculo.us包含：动画框架（animation framework），拖放（drag and drop）， Ajax控件，DOM工具，单元测试等。
ExtJS
ExtJS是一个跨浏览器，用于开发RIA（Rich iInternet Application）应用的JavaScript框架。提供：高性，可定制的Web UI控件库。良好的设计、丰富的文档和可扩展的组件模型。
