之前已经介绍过了P5.js的编辑器，也简单说明了它的用法，这次我们就开始使用它来画一些简单的二维图形。
当我们代开编辑器,然后选择新建一个草图，就会看到在编辑器中已经有了设置函数setup() 和绘画函数draw() 。
在这里我们可以看到有一些花括号、小括号、逗号和分号，在括号中还有一些数字，此外还有一些英语单词，这些单词在程序中通常被称为命令或指令。在P5.js中它有一个专有的名称，就是函数。
我们以这条语句 createCanvas(400,400); 为例。它的结构形式是 ：
指令( _____, _____ );
这种结构也就是P5.js的语法结构，符合这种语法结构的语句就是可以被计算机执行的指令。
createCanvas 是一个函数名，可以把它理解为一个命令，它的意思是创建一个画布。括号里面的内容被称为参数，它的作用是修饰这个命令，来说明如何执行这条命令。这条语句的整体意思就是：创建一个画布，并且这个画布的宽度是400个像素，高度也是400个像素。运行之后，我们就可以看到右边出现了一个正方形的区域，在这个区域内可以显示出我们想要绘制的这种图形和物体。我们把这个区域称之为画布，如果我们调整参数的大小，可以看到画布的大小也随着发生变化。
其实，这种语法结构也是JavaScript语言的语法结构，在JavaScript中，如要要使用一个函数，也需要写出函数名，括号，参数和分号。
我们可以打开P5.js网站（http://p5js.org/zh-Hans/）中的“参考文献”这个选项。在这里列出了P5.js的每一个函数，也可以使用搜索框来查找函数。
点击这些函数，可以查看它们的详细资料，这个资料也被叫做技术文档，在技术文档中，包括了使用这个函数的例子，对这个函数的说明，这个函数的语法，对函数中相关参数的说明。P5.js的函数有很多，在本文中，先说一下2维图形和一些属性。
在使用这些绘制二维图形的函数之前，需要先简单地理解什么是setup函数和draw函数，setup函数是创建画布的地方，我们在一开始就要建立画布，把createCanvas函数放到setup函数中。 draw函数是所要绘制的各种图形和物体所在的地方，它们最终会在画布上显示出来。
在这里我们以一个长方形为例，在draw函数中，先写长方形的函数名rect，然后在括号中写上几个数字，并且以逗号隔开，最后再以分号结束。如下：
rect(100,100,50,100);
运行之后，就会在画布中出现一个长方形。
接下来，说明一下rect(100,100,50,100);这条语句的含义。rect的意思是画一个长方形，括号里面的参数，是用来描述我们想要画出的长方形的一些属性。
要理解括号内参数的意思，我们需要用到直角坐标系。直角坐标系是一种表达在二维空间位置信息的方法。和使用地球的经纬度来表达一个地点类似，在直角坐标系中，通过X轴和Y轴的位置，也可以叫做横坐标和纵坐标的位置可以确定一个点的位置。
但是在P5.js中的直角坐标系与我们在数学中学到的直角坐标系略有不同，它的原点位于画布的左上角的顶点，它的Y轴方向是向下的。
并且在P5.js中X轴和Y轴的单位是像素，所以如果显示屏的分辨率是1920×1080,那么在P5.js中就表示为屏幕的宽是1920个像素，高是1080个像素。
我们再继续看rect函数中各个参数的含义，其中第一个和第二个参数是表示长方形左上角顶点横坐标和纵坐标的值，第三个和第四个参数是表示长方形的宽度和高度。所以 rect(100,100,50,100)；的意思就是画一个长方形，它的左上角顶点的位置距离画布的左边是100个像素，距离画布的上边也是100个像素。并且它的宽是50个像素，高是100个像素。
如果想要了解更多关于rect函数的信息，我们可以打开rect的技术文档。
这里有使用rect函数的一些例子：
也有rect函数的语法：
在这个文档中，说明了函数的意思和各个参数的含义。我们可以看到除了x,y,w,h这四个表示横坐标，纵坐标，宽度，高度的参数之外，还有几个用方括号括起来的参数，表示这些参数是可选的，是可有可无的。前四个 参数是必须有的。如果有这些可选的参数，就表示长方形的角是圆角，并且参数的值就是圆角的半径。
特别的是，如果圆角的半径正好是长方形的宽的一半，就会由方形变成圆形。
以上是关于画长方形的rect函数的用法，画其他二维图形的函数的用法也与此类似。
1
从上到下依次是长方形、椭圆、方形、三角形、四边形、圆形、线段、弧线和点。
另外再说一下二维图形的一些属性。
rectMode() 函数的意思是设置长方形，正方形的模式，常用的是边角模式和中心模式，默认的是边角模式，所以上面绘制的长方形都是以左上角的顶点为基准。但是有时候，用中心模式会更方便。例如要在画布的中心画一个长方形，让长方形居中，我们就可以把模式设置为中心模式 。
rectMode(CENTER);
这时就会以长方形的中心点为基准。
另外的ellipseMode() 函数与rectMode() 函数非常类似，也有边角模式和中心模式。
再说一下strokeWeight() 函数，它的作用是设置点、线段和形状边线的粗细，括号里的参数表示线的宽度，单位也是像素。
我们举例说明一下：
其他的几个属性不常用，也很容易理解，这里就赘述了。对于以上所讲的形状函数，和一些属性不需要记住他们所有的用法和参数，在有需要的时候，可以随时查看它的文档，来了解它的用法以及参数的含义。
最后，我们可以用以上的二维图形函数来画一个简笔画，作为练习。
1
运行的结果是：
参考内容：
P5.js参考文献
—— https:// p5js.org/zh-Hans/refere nce/
Shapes & Drawing - p5.js Tutorial
—— https://www. youtube.com/watch? v=c3TeLi6Ns1E&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=4
