2.2　基本形状

p5.js可以使用一些函数绘制基本图形。如果读者之前学习过Photoshop或者类似的数字绘图软件，应该对计算机绘图有一些了解，这些软件都可以使用基本图形创建非常有意思的图画。p5.js可创建的基本图形包括：点、直线、三角形、四边形、矩形、椭圆、圆弧和贝塞尔曲线。下面将举例说明这些绘制基本图形函数的使用方法。

例2-2　点——point函数

point（x，y）函数可以绘制像素点，即填充一个像素单位。这个函数需要两个参数，x坐标与y坐标。首先创建一个宽为300像素、高为300像素的画布，然后在画布中心绘制一个坐标为（150，150）的点。

使用肉眼分辨屏幕中的一个像素点非常困难。因此，试着再多写几个点并改变一下它们的参数，让它们处于同一条水平线或垂直线上，这样就能看得更清楚并且能更快地明白这个函数的意义。

例2-3　线段——line函数

line（x1，y1，x2，y2）函数绘制线段需要4个参数，前两个参数定义线段起点坐标，后两个参数定义线段终点坐标。使用line函数绘制一条起点坐标为（80，400）、终点坐标为（400，100）的线段（效果图如图2.1所示）。

例2-4　三角形与四边形——triangle和quad函数

triangle（x1，y1，x2，y2，x3，y3）函数绘制三角形需要6个参数，quad（x1，y1，x2，y2，x3，y3，x4，y4）函数绘制四边形需要8个参数（每个顶点需要一对坐标参数）（效果图如图2.2所示）。

例2-5　矩形——rect函数

绘制矩形函数rect（x，y，width，height）是经常需要使用的一个函数，它需要4个参数，前两个参数定义矩形左上顶点位置，后两个参数分别定义矩形的宽度与高度。本例使用rect函数创建了3个矩形（效果图如图2.3所示）。

如果希望rect函数的前两个参数表示矩形的中心点坐标，那么可以使用rectMode（CENTER）函数将矩形起点位置设置为矩形的中心。运行以下代码，看看矩形的位置发生了什么变化。

例2-6　椭圆——ellipse函数

绘制椭圆函数ellipse（x，y，width，height）与rect函数类似，前两个参数定义椭圆的圆心，后两个参数分别代表椭圆的宽度直径及高度直径（效果图如图2.4所示）。

p5.js中并没有用于绘制正方形或正圆形的函数。想要做出这两种形状可以使用ellipse或rect函数，并设置其宽度与高度参数值相等即可。

例2-7　圆弧形——arc函数

arc（x，y，width，height，start，stop）函数可以绘制圆弧形。arc函数共有6个参数，前4个的作用与椭圆一样，用于确定圆弧的圆心位置和宽、高直径。第5个参数决定圆弧的起始角度，第6个参数是圆弧的结束角度（效果图如图2.5所示）。

arc函数的第5个和第6个参数采用弧度制计算。弧度是基于圆周率PI的测量值，图2.6展示了弧度与角度的关系。角度从0°至360°进行表述，而弧度则从0至大约6.28。p5.js给常用的4个弧度值赋予了特殊的名称：QUARTER_PI 、HALF_PI、PI和TWO_PI分别代表45°、90°、180°和360°的弧度值。

例2-8　角度转换为弧度

如果习惯以角度为单位进行计算，可以使用radians（angle）函数将角度转换为弧度。本例与例2-7的效果一样，只不过加入了radians函数将角度转换为弧度。

例2-9　贝塞尔曲线——bezier函数

贝塞尔曲线由法国工程师皮埃尔·贝塞尔于1962年发明，该曲线用他的名字命名。最早，贝塞尔曲线用于汽车设计，后来广泛运用在工业设计领域和数字图形设计中。著名的Photoshop中的钢笔工具就是使用了贝塞尔曲线。p5.js中，贝塞尔曲线由4个点定义，分别是起点、终点以及两个相互分离的控制点。移动两个控制点，贝塞尔曲线的形状会发生明显的变化。

贝塞尔曲线函数bezier（x1，y1，cx1，cy1，cx2，cy2，x2，y2）包含8个参数，其中，x1，y1与x2，y2定义起点和终点坐标；cx1，cy1与cx2，cy2定义两个控制点坐标（效果图如图2.7所示）。

综上所述，所有绘图函数的使用方法与呈现效果如图2.8所示。