大家好，我是game1024，一名爱编程的测试同学，最近在看The coding Train学习p5.js，期望把学习过程记录下来，加深自己的印象。
图形绘制
在上一节中，我使用了几个绘制图形的函数rect(100, 50, 75, 100)、line(0, 50, 400, 300)、background(220,0,200)，
那么他们后面的参数到底有什么作用呢？计算机是如何定位矩形的位置的？计算机它是如何混合出颜色的？我应该怎么把矩形绘制在画布中心？带着这种疑问，我一步步的搜索资料，慢慢就摸索清楚了，在计算机里面画画还挺反人类的！！！
计算机中的坐标
要弄清楚计算机是如何定位的，首先就需要了解计算机中的坐标系统，查阅了下资料，和我们一般的初中高中数学坐标有点小区别，计算机中的坐标轴原点是在左上角的
一张画布的坐标轴看起来就像是下面这样
了解的计算机的坐标体系之后呢，可以看看矩形是如何定位的，我尝试着修改rect的参数的x,y至画布的一半（200,150）
可以看到矩形的整体位置是处在中间偏右下的位置，并没有完全居中。这是因为rect中的x,y参数实际代表的是矩形左上顶点的坐标,画出来如下
如果我想要矩形整体居中，有两种方式，
- 通过数学计算出整体居中后，左上顶点的坐标
- 通过rectMode(CENTER)
第一种太过麻烦不推荐，用第二种方法会方便很多
计算机中的颜色
接下来是搞清楚background(220,0,200)是如何画出紫粉色的，为了搞明白这点，我去了解下计算机中的颜色表示方法：RGB
RGB 是Red、Green、Blue的缩写，计算机显示出来的所有颜色都是由这三种颜色混合得到的，比如background(220, 0, 200)就是由220单位红色，0单位绿色，200单位蓝色混合得到紫粉色
调整不同的RGB比例，就可以得到各种各样的颜色了
| 颜色 | 例图 |
|---|---|
| 黑色 | |
| 白色 | |
| 灰色 |
