手绘VS码绘（一）：静态图绘制(码绘使用P5.js)

首先让我们来看看原图：

出于想要简单一点的考虑，手绘和码绘就都不画右下角的头啦！

手绘：

先来看看手绘的效果图吧（手残ing…）

emmmm大概是真的有点丑

码绘

关键的码绘部分来啦！
码绘我是用的P5.js的网络编辑器（附上网址：https://editor.p5js.org/）

先来看看效果图，然后再一部分一部分的来看绘图过程吧！

还是挺像的对吧！！！
就是脑袋好像小了一点…

绘制用到的一系列的函数：(具体函数的语法以及示例可以到官网https://p5js.org/reference/中查看)

准备工作：

1.设置屏幕（显示窗口）的像素：createCanvas(width, height);
2.设置背景颜色：background（R,G,B）

绘制基本图形的函数

1.点:
point(x, y)；
2.线:
line(x1, y1, x2, y2)；
3.三角形：
triangle(x1, y1, x2, y2, x3, y3)
【三角形三个点的坐标】
4.矩形：
rect(x, y, w, h, [tl], [tr], [br], [bl])
【x,y—矩形开始点(左上角)的坐标；[tl],[tr],[br],[bl]—左、右