【p5.js学习笔记】码绘的基础知识

目录

一、绘前准备

1. 准备画布：  createCanvas(720, 400);

2. 设置背景颜色： background(r,g,b,a); / background(gray)

3. 是否绘制形状：noStroke(); / noFill();

二、选择绘制模式

1. 绘制边框：stroke(r,g,b,a);

2. 填充边框：fill(r,g,b,a);

三、绘制基础形状

---

在线编辑器：https://editor.p5js.org/#

参考文档：https://p5js.org/zh-Hans/reference/

官方示例：https://p5js.org/zh-Hans/examples/

---

一、绘前准备

1. 准备画布：  createCanvas(720, 400);

制作一个 720 像素宽 400 像素高的画布。

2. 设置背景颜色： background(r,g,b,a); / background(gray)

常用形式：传入参数为RGBA四个通道值 或 一个灰度值。

其余形式参考 https://p5js.org/zh-Hans/reference/#/p5/background

3. 是否绘制形状：noStroke(); / noFill();

如果 noStroke() 和 noFill() 都被调用的话，没有形状会被画在荧幕上。

 

二、选择绘制模式

1. 绘制边框：stroke(r,g,b,a);

设置形状的外形线色。这颜色可用 RGB 或 HSB 颜色定义，取决于当时的颜色模式（默认色彩空间是 RGB，而每个数值都介于 0 至 255 之间）。默认透明度值也介于 0 至 255 之间。
如果所提供的参数是单一字符串，RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下，提供第二个参数以定义透明度值并不被支持，而需使用 RGBA 字符串。

stroke('red');      // 设置笔锋颜色
strokeWeight(4);    // 设置笔锋粗细

2. 填充边框：fill(r,g,b,a);

设置形状的填充色。

 

三、绘制基础形状