js手册中文版【js手册app】 收藏 0

p5.js 中文入门教程

点赞 + 关注 + 收藏 = 学会了

本文的目标是和各位工友一起有序的快速上手 p5.js ，会讲解 p5.js 的基础用法。

本文会涉及到的内容包括：

• 项目搭建
• p5.js 基础2D图形
• 文字
• 图形样式设置
• 图片
• 事件（交互相关的）
• 基础动画

其中还会讲解部分 p5.js 全局方法。

本文不涉及3d部分（放到下一篇吧）。

官方文档很重要，但对于初学者来说可能会有点懵。因为官方文档主要讲解api的用法，第一次接触p5.js的工友可能不是那么容易将各个知识点串联起来。

本文在基于官方案例的基础上，把我觉得入门必学的知识点过一遍，然后串起来搞一个小特效。

要快速学习一个库，尤其是可视化方面的库，最快速的方法是找到一个好教程，然后跟着敲代码，建立自己的 “demo仓库” 。

学习本文内容，你需要有 JavaScript 基础。

引用官网的话：

p5.js 是个 JavaScript 创意编程程式库，其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何人！p5.js 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。

p5.js 使用绘图的比喻并有一副完整的绘画功能。除此之外，您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图，这包括了 HTML5 物件，如文字、输入框、视频、摄像头及音频。

简单来说，p5.js 能让“切图仔”更容易做出具有艺术感的作品（很能整活）。

举个例子，p5.js 很擅长实现下面这种效果。

p5.js 是 Processing 往浏览器延伸的一个 canvas库 。Processing 是使用 Java 编写的，而 Java 对于从事艺术工作的工友来说上手是有点难度的。

浏览器暂时只接受 HTML、CSS 和 JavaScript，如果能将 Processing 直接搬上浏览器运行的话，对于艺术家来说是大大的好事。于是，p5.js 应运而生！

p5.js 第一个测试版在 2014年8月 发布。

更多的故事可在 p5.js 官网 中寻找，本文的目标是光速入门 p5.js 。

• p5.js 官网
• p5.js github地址
• p5.js npm地址

本文的目标是和各位工友快速上手 p5.js，所以 CDN 的方式引入 p5.js，因为这样非常快！

接下来我们试试在画布创建一个圆形吧~

[p5_version] 改成指定版本号即可，本文使用的版本是 1.5.0 ，所以我是这样引入 1.5.0 版的 p5.js：

查看其他版本可以浏览：cdn.jsdelivr.net/npm/p5@1.5.…

安装

引入

我使用的开发工具是 vs code，并装了 Live Server 插件。这个插件可以帮我们快速启动一个服务端运行当前页面，并具备热更新的能力。启动完服务，在浏览器运行指定页面后，你代码的每一次保存，浏览器都会自动刷新。

上面的代码用到几个“奇怪”的方法，逐一讲解一下。

• setup(): 可以理解为 p5.js 的一个生命周期，创建画布的方法通常写在 setup() 里。
• draw(): 同样可以理解为 p5.js 的一个生命周期，在这函数里的代码会以 60帧每秒 的速度执行。
• createCanvas(): 创建画布的方法，这个方法是 p5.js 在全局创建的，传入画布的宽高后，p5.js 会自动在页面的最后插入一个 canvas 元素。
• background(): 设置背景色，可以分别传入 r、g、b ，该方法也是 p5.js 在全局创建的。
• circle(): 创建圆形的方法，3个参数分别代表：圆心x坐标、圆心y坐标、直径。

暂时只需大概了解一下怎么画一个圆就行，详细的后面会讲到。

使用 p5.js ，你可以理解为用这个工具创造一个“有生命”的世界。

• 创造世界的工作是放在 setup() 函数里的。
• “有声明” 的意思是这个世界有生物，生物无时无刻都在活动。而活动的过程是放在 draw() 函数里。

setup() 和 draw() 这两个函数非常重要，在前端的世界里，你可以把 setup() 和 draw() 理解为生命周期函数。

使用 CDN 的方式开发时，引入 p5.js 后就会在全局创建一些函数和常量。

setup() 是 p5.js 里一个很重要的方法，你可以简单的理解为 setup 是 p5.js 里的一个生命周期函数。在该函数里可以做很多初始化工作，比如创建画布并设置大小、画布背景色等。

setup() 在每个页面都只能出现一次，并且它不能在一开始执行后再次被调用。

更多说明可查看 setup()说明文档

draw() 是 p5.js 里另一个很重要的函数。

draw() 会在 setup() 之后执行，并且会重复的执行。如果想打断 draw() 可以试用 noLoop() 方法。

draw() 每秒执行次数受到 frameRate() 影响，frameRate() 默认每秒60帧。如果需要修改帧率，可以直接传入指定数值，比如 frameRate(20)。

如果要做动画，代码可以写在 draw() 里。

更多说明可查看 draw()说明文档

p5.js 可以绘制 2D 和 3D 图形，但在光速入门阶段只会讲解 2D 图形的基础用法。

先从最简单的点线面开始学起~

点是 p5.js 的基础元素之一，语法如下：

point() 接收3个参数，其中 x 和 y 是必传参；如果是在 2D 画布里，z 不需要传。

• x 表示点在 x 轴的坐标
• y 表示点在 y轴的坐标

点出现在画布的中间

上面的例子中，画布的宽高是200像素，点在 100, 100 的位置，仔细看可以发现点出现在画布的中心。

如果需要画一个更大的点，可以通过 strokeWeight() 方法设置

其实 strokeWeight() 方法是用来设置描边粗细的，用在 point 里也完全没问题。

更多说明可查看 point()说明文档

要画一根线段的语法：

注意上面的参数顺序，一定不能写错的。

其中 z1 和 z2 在 2D 情况下是不需要传的，所以语法变成这样：

• x1 和 y1 代表起点坐标
• x2 和 y2 代表终点坐标

使用 line() 方法会自动将起点和终点连接起来，形成一根线段。

更多说明可查看 line()说明文档

三角形的语法是：

和前面的 点(point) 和 线段(line) 不同，三角形(triangle) 的所有参数都是必传的。

三角形有3个点，每个点需要用2个坐标(x和y)来描述，所以 triangle() 一共要传入6个参数。

经过前面的 点(point) 和 线段(line) 练习，相信你看到三角形的参数名称就已经知道什么意思了。

确定了3个点的坐标后，triangle() 会使用直线连接这3个点，形成一个三角形。

更多说明可查看 triangle()说明文档

正方形是特殊的四边形，也可以说是特殊的矩形。

所以先从正方形讲起。

创建正方形用到的方法是 square()，语法如下所示：

• x 和 y 是正方形左上角的坐标
• s 是正方形的边长

tl、tr、br、bl 是用来设置正方形的圆角半径，分别是 上左、上右、下右、下左。如果不传这几个参数，正方形的角默认是90°（直角）。

圆角半径参数遵循以下规则：

意思是，如果只传入1个半径值，那么后面3个圆角半径的值会取左上的圆角半径。

如果是传入2个圆角半径，那第三和第四个圆角半径的值会取第二个的值。

更多说明可查看 square()说明文档

前面了解完 正方形(quad) 如何创建后，学习 矩形(rect) 会觉得非常简单。

p5.js 提供了 rect() 方法绘制矩形，而且会根据参数的数量判断绘制矩形还是绘制正方形。

语法如下：

• x 和 y 是矩形左上角坐标位置
• w 是边长

如果只传3个参数，绘制出来的是正方形（长和宽的值都使用第三个参数）

如果传4个参数的话，就可以分别设置长和宽了，第3和第4个参数分别是 w 和 y。

• w: x轴方向的长度（宽）
• h: y轴方向的长度（高）

后面的4个参数 tl、tr、br、bl 分别设置四个角的圆角半径，不设置的话默认就是90°。用法和正方形一样的，自己动手试试看吧~

更多说明可查看 rect()说明文档

如果需要绘制四边形，使用 quad() 即可。

四边形有4个顶点，1个定点用2个参数表示 x 和 y 坐标。

语法如下：

需要注意绘制四边形时顶点的绘制顺序

更多说明可查看 quad()说明文档

圆形是“特殊椭圆”，使用 circle() 方法可以创建圆形。

语法如下：

• x 和 y 是圆形的坐标
• d 是圆的直径

上面代码的意思：圆心在 (80, 80) 的位置，直径是 100。换算一下半径就是50咯。

更多说明可查看 circle()说明文档

使用 ellipse() 可以创建椭圆，椭圆(ellipse) 的创建方法和 矩形(rect) 其实是有点像的。

ellipse() 方法会根据传入的参数数量判断创建圆形还是创建椭圆。

语法如下：

• x 和 y 确定了椭圆的圆心
• w 椭圆在x轴的宽度
• h 椭圆在y轴的高度

如果只传3个参数，h 会取 w 的值，所以画出来的是正圆形。

如果传4个参数，并且 w 和 h 的值不一样，那画出来就是一个椭圆。

更多说明可查看 ellipse()说明文档

弧形(arc) 是一个很好玩的方法，你可以用 arc() 画圆形、椭圆、饼图和弧线。

随着功能的增加， arc() 所需的参数也会比圆形和椭圆更多。

先来看看语法：

• x 和 y: 圆弧的圆心坐标
• w : x轴方向的宽度
• h: y轴方向的高度
• start: 弧形开始的角度（用弧度定义）
• stop: 弧形结束的角度（用弧度定义）
• mode: 定义弧形的画法。可选值：开放式半圆形（OPEN），封闭式半圆形（CHORD），封闭式饼形段（PIE）
• detail: 指定构成圆弧周长的顶点数量，在 2D 模式下不会用到

我知道有很些工友对弧度制不太熟悉，其实也不需要担心，p5.js 提供了 radians() 方法，可以将角度转成弧度。

接下来我就用角度的方式去画图展示一下 arc() 是如何使用的。

我画4个弧形，分别表示 90°、180° 、270° 和 360°。

从上面的代码可以看出，0°（角度）是在图形的正右方。

顺便展示一下不同 mode 的效果

OPEN、CHORD 和 PIE 这几个常量都不需要我们定义的，p5.js 已经在全局定义好了。

更多说明可查看 arc()说明文档

除了前面讲到的几个基础图形，p5.js 还提供了贝塞尔曲线、球体、立方体、圆锥等图形元素，甚至还能自定义多边形。

但在光速入门阶段我们只需掌握基础的图形，再加上自己的创意就可以做出很漂亮的作品。

创建文本的方法叫 text()。

语法如下：

• str: 文本
• x 和 y 是文本基线左侧的坐标
• x2 和 y2 定义文本内容占用的面积，x2 表示宽度，y2 表示高度。

我们还可以传入 x2 和 y2 参数来控制内容的展示方式。

x2 会影响文本换行方式，y2 控制文本显示的内容。

先说 x2，这个参数是控制文本在 x 轴方向的展示长度，x2 – x 就可以得出这段文字在 x 轴方向可以展示的长度。

比如一个字符的宽度是 5px ，x 设为10，x2 设为20，那么一行就可以展示2个文字。

但 x2 并不能很好的控制文本长度，它只会判断这行文本里有没有空格，如果出现空格，且超出文本框宽度的内容就会换行。

y2 – y 得出的长度就是y轴方向可展示的区域。超出这个区域的文本都不会展示出来了。

举个例子

此时，在 x2 和 y2 的限制下，文本已经无法完全展示出来了。

p5.js 提供了几个设置样式的方法，我挑常用的几个来讲讲。

p5.js 支持多种颜色值，比如 颜色关键字、十六进制CSS颜色字符串、RGB、HSB、HSL、灰度。

颜色关键字 和 十六进制CSS颜色字符串 就不多说了，合格的切图仔都懂这个。

• 关键字: \’red\’、\’blue\’ 等
• 十六进制: #ff0000 等

需要注意的是 RGB、HSB、HSL 和 灰度。

其中，RGB、HSB 和 HSL 都支持传入第4个参数，这个参数表示透明通道。

RGB 的第4个参数取值范围是 0 ~ 255，0 表示完全透明，255 表示完全不透明。

如果不传第4个参数，默认值是 255。

我用 background 背景色来举例。

如果此时在 background() 里传入第4个参数就可以改变背景色的不透明度。

比如

HSB 和 HSL 都是颜色表示的一种方法。

• HSB: H(Hue) 色相、S(Saturation) 饱和度、B(Brightness) 亮度
• HSL: H(Hue) 色相、S(Saturation) 饱和度、L(Lightness) 明度

它们二者之间的区别可以自行百度搜搜，或者可以看看这篇文章：《色彩空间中的 HSL、HSV、HSB 有什么区别？》。这不是本文的重点。

HSB 和 HSL 在 用法 上差不多，但和 RGB 是有区别的。

1. 使用 HSB 和 HSL 前，要设置颜色模式，告诉 p5.js 要使用哪种颜色模式去渲染。而 RGB 就省略了这步。
2. HSB 和 HSL 第1个参数取值 0 ~ 360，第2和第3个参数取值是 0 ~ 100。而 RGB 前3个参数的取值都是 0 ~ 255。
3. 在透明度上，HSB 和 HSL 在第4个参数的取值范围是 0 ~ 1 ，而 RGB 是 0 ~ 255 。

如果要使用 HSB ，就需要使用 colorMode(HSB) 设置一下；HSL 就用 colorMode(HSL) 设置一下。

还是用 background() 举例

灰度模式的意思是只有 “黑白灰” 三种颜色，而灰色是过渡颜色。

灰度模式是默认的颜色模式，不需要进行特殊设置。

灰度模式的取值范围是 0 ~ 255。0表示黑色，255表示白色，中间的其他值表示不同程度的灰色。

使用 RGB 设置颜色，需要传 3 ~ 4 个参数，而使用灰度模式只需传1个参数。

还是拿 background() 举例

前面一直使用背景色，相信大家已经对 background() 的用法非常熟悉了。

通常 background() 会在2个地方用到。

一个是写在 setup() 里，在初始化画布时可以设置画布背景色。

还可以写在 draw() 里，每次刷新画布都可以设置画布背景色。写在 draw() 里，画布每次刷新都会重新设置一次背景色。某些情况下是很有用的，比如移动图像时，如果背景色没重新设置一次，那么图形移动后会产生“残留”的现象。这个放在动画章节说。

创建图像后，图像默认的填充色是白色。

要修改图像填充色，使用 fill() 方法即可。

需要注意的是，一旦设置了 fill() ，在它后面创建的图形都会使用相同的填充色，正如上面的例子那样。

如果希望后面的图形使用别的颜色，可以再重新调用一遍 fill() 进行设置。

如果不想设置填充色，可以使用 noFill() 方法。

不填充的情况下，图形内部将会设置成透明，会直接显示在它下层的颜色，如果它下层没有其他元素，则会直接显示背景色。

p5.js 创建出来的元素默认是有一个黑色边框，如果想要修改边框颜色，可以使用 stroke() 方法。

和 fill() 一样，在使用 stroke() 设置完颜后的图形都会使用这个边框颜色。如果要再次修改边框颜色，只需再次使用 stroke() 即可。

如果不希望图形有边框，可以使用 noStroke() 方法。

使用 strokeWeight() 方法可以设置图形边框的粗细。

使用 textSize() 方法可以修改文字的字号

关于文字的样式，前面说到的 fill()、stroke()、strokeWeight() 方法都可以对文字的填充色、描边等样式进行设置。自己动手试试吧~

在打算将图片加入到画布之前，我们需要了解 preload() 函数。

preload() 函数也是 p5.js 的一个生命周期函数，它会在 setup() 前执行。

preload() 可以强制程序等待，直到 preload() 函数内的资源加载完成或者事件执行完再执行其他代码。

所以一般会把图片和视频等资源加载写在 preload() 里。

了解完 preload() 后，我们就可以使用 loadImage() 方法加载图片，使用 image() 方法渲染图片。

注意：加载和渲染是分开2步操作的！

本例请来的演员是 摸鱼的春哥

• loadImage() 方法传入图片地址
• image(img, x, y) 方法第一个参数是图片对象。x 和 y 是图片左上角的坐标。

除了可以渲染 jpg 和 png 外，p5.js 还可以渲染动图gif。

可以在 setup() 函数里使用 frameRate() 方法设置帧率，这可以影响gif的刷新率。

p5.js 提供了很多鼠标和键盘的交互事件，入门阶段我们挑2个来学就行。

交互事件通常写在 draw() 函数里。

本例使用 mouseIsPressed 判断用户是否点击了鼠标，点击鼠标时画布背景是蓝色，松开鼠标后画布背景是橙色

draw() 函数在页面运行时会一直执行，所以 mouseIsPressed 写在 draw() 里可以被捕捉到。如果用户点击鼠标，且被捕捉到 mouseIsPressed 时，mouseIsPressed 会返回 true。

keyIsPressed 可以检测用户当前是否按住键盘，如果键盘被按下会返回 true ，否则返回 false。

动画其实就是在修改元素属性的同时不断刷新画布。

在 p5.js 里做动画效果其实很简单，只需要在 draw() 里修改元素属性即可。

举个例子：圆形图案跟随鼠标指针移动

有没有发现，上面的例子在 draw() 里首先设置背景色，再创建一个新的圆。

如果没重新设置背景色的话，上一帧的圆会保留下来。很多时候保留上一帧的数据会产生不错的艺术作品。

试试把 draw() 里的 background(100) 这句删掉

这个也是p5.js官网的例子

到此，相信各位工友已经对 p5.js 有一定的了解了。

点赞 + 关注 + 收藏 = 学会了

一学就会！小白6分钟看懂学习JavaScript的六大步骤

JavaScript（通常缩写为JS）是一种解释型、面向对象、多范式的高级编程语言。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。

JavaScript是世界上最流行的脚本语言，因为它很容易上手，而且学习到它的精髓之后还可以编写高质量的代码，这就是我推荐给初学者学习的主要原因。今天就带大家来学习JavaScript。这是当年我学习JavaScript的六大步骤，希望对你也有帮助：

1.学习JavaScript基础语法：

古人常道：“万丈高楼平地起”，意思大概是再高的大厦都要从平地开始修建，学习JavaScript也是一样，想要学好它就一定要把基础先打牢，学习JS的第一步是JavaScript基础语法。

首先，你要了解async和defer之间的区别，然后，深入学习代码语法知识，例如变量，数据类型，循环和条件语句，函数，匿名函数，闭包，阵列和关联阵列，事件，正则表达式，promises。

注意语法顺序一定要准确！上述举例如果有遗漏的，大家可以在评论区留言。此外，我个人推荐你学习如何使用Chrome DevTools调试，因为Chrome DevTool是远程调试JS最好的工具。

2.学习面向对象编程：

当你具备一定的JavaScript基础语法后，你应该转向学习面向对象编程（OOPs）。OOPs是JS和其他编程语言中最重要的概念。JS中的OOPs是基于原型继承链上运行的，不像Java或C++是基于对象或类继承。

然而，关于元数据，你可以在学习了OOPs之后再转到学习元数据编程。虽然元数据很好学，但它并不是JS中最重要的部分。我相信，你可不会喜欢JS带来的意外“惊喜”。

3.学习测试QA：

测试代码和调试JS一样重要！你可能听说过TDD(测试驱动开发)或BDD(行为驱动开发)这样的词，但到底是什么意思呢？简而言之，TDD是指写一个未通过的测试用例，然后让测试通过，最后重构。

而BDD则是根据业务，编写具体的例子和自动化的测试，通过探索，发现，定义，最后推出软件所需的行为。BDD和TDD之间没有本质的区别。把它们组合在一起的是，它们都需要一群人，指定软件在执行之前应该如何协同行动。

4.学习jQuery：

jQuery是一套跨浏览器的JavaScript库，它的特点是动态性和互动性。它使用起来十分方便，就jquery本身而言，你经常会遇到如何将AJAX与jQuery整合的问题。AJAX是什么？举个例子来说吧，

「当你在百度浏览器中输入一个关键词，不用刷新便可得到关于词条的一些内容，这就是AJAX」

AJAX是Asynchronous JS and XML的缩写，它主要处理的是与HTML和CSS不同步的请求而产生的问题。

5.学习框架

现在，你已经了解了jQuery，JS基础语法，AJAX，Chrome DevTools，测试QA。以下的是你们现在真正应该学习的内容——框架：

React：

React的前身是React.JS。React最初是由Facebook和少数个人以及一个小社区开发的，但随着时间的推移，React进行了多次的优化，现在它变成了很有意思而且功能很强大的代码，也很容易学习。我个人是十分推荐你学习React的。日后，你可以用React以组件的形式在网页中开发用户界面。

Angular：

Angular在某方面和React非常相似，不过你可以用Angular以组件的形式编写SPA。它是现在IT行业前端开发方面需求量最大的语言。Angular其实是JS框架，基本上意味着它是用JS编写的。

你可以在每个浏览器的各个角落遇见JS，这也侧面证实了JS功能十分强大，也十分有用。我强烈建议你既要学习React，也要学习Angular。

Node.JS：

Node.JS是在服务器端编写JS的框架。用Node.JS写的代码或API的速度快得离谱，而且Node.JS还可以同时处理多个请求。不像其他后端语言，很少有公司在Node.JS上实现了他们的服务器。

它是服务器端语言的未来，在Node中实现的大型Web应用程序的可扩展性和部署方面存在一些问题，所以现在我不会称它为服务器端语言的主角。

Express.JS：

和上文所述的框架一致，它也是一个功能强大的框架。Express.JS简称Express，它是针对Node.JS的web应用框架，在MIT许可证下作为自由及开放源代码软件发行。它被设计来建造web应用和API。

同样它也是由用JS编写的，我个人建议如果你在学习Node.JS，那么一定要把Express.JS也掌握好。

6.学习库

框架学习也结束了，下面正是学习JavaScript之路上至关重要的最后一点。学习一段时间后，你可能绞尽脑汁想写好代码，而且明明思路很清晰，却只能写出一点点代码。这时候你就该使用这个库了，我并没有推广库的想法，而是真心希望你可以拥有非常有趣的学习和使用经历。

Coffee.Script：

Coffee.Script与JS功能类似，但它有一个好处就是没有分号，括号，双引号，甚至是大括号的杂乱和麻烦。当你学习了JS的基础语法，搭建完众多框架，再学习coffee.script，你就会意识到它有多么的很简单。正因为它十分容易编写，所以我真的很推荐你们进行学习。

当你开始学习时也可以使用JS文档访问JavaScript，并且不要害怕一路上承担一些项目。完全不需要担心，项目会给你带来的挑战，项目的一次次完成会带给你不一样的新鲜感和信心，只有突破重围才会看到崭新的自己。记住明天的你会感激现在拼命的自己，当你精通JS之时，任何挑战都没有办法限制你学习。

如果你对这篇文章有任何感悟或想法，可以在评论区留言。我个人对编码充满了激情，我认为每个人都应该学习它，而不是敬而远之。衷心地祝原你在编码的路上越走越稳，越走越快，越走越远。到那时你虽已是码农，但你仍要牢记学习，从中得到启发，并走向更美好的明天。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com