语法：
混合两个颜色以找到一个介于它们之间的颜色，范围：0~1，0靠近第一种颜色，1靠近第二种颜色。
// 常量
const Y_AXIS = 1;
const X_AXIS = 2;
let b1, b2, c1, c2;
function setup() {
// 画布：710*400
createCanvas(710, 400);
// 定义颜色
b1 = color(255); // 白色
b2 = color(0); // 黑色
c1 = color(204, 102, 0);
c2 = color(0, 102, 153);
noLoop();
}
function draw() {
// 背景（左）
setGradient(0, 0, width / 2, height, b1, b2, X_AXIS);
// 背景（右）
setGradient(width / 2, 0, width / 2, height, b2, b1, X_AXIS);
// 前景（上）
setGradient(50, 90, 540, 80, c1, c2, Y_AXIS);
// 前景（下）
setGradient(50, 190, 540, 80, c2, c1, X_AXIS);
}
// 自定义渐变色(x, y)为左上角坐标，(w, h)为矩形的宽和高
function setGradient(x, y, w, h, c1, c2, axis) {
// 取消填充色
noFill();
if (axis === Y_AXIS) {
// 从上到下的渐变，注意循环中的条件
for (let i = y; i <= y + h; i++) {
// map可以将i这个数值从(y, y+h)映射至(0, 1)
let inter = map(i, y, y + h, 0, 1);
// 每一次循环获取渐变色中的一个颜色数值，该数值是通过map函数获取
let c = lerpColor(c1, c2, inter);
stroke(c);
// 画横线，想一下为什么此循环能实现从上到下的渐变色
line(x, i, x + w, i);
}
} else if (axis === X_AXIS) {
// 从左到右的渐变，注意循环中的条件
for (let i = x; i <= x + w; i++) {
// map可以将i这个数值从(x, x+w)映射至(0, 1)
let inter = map(i, x, x + w, 0, 1);
// 每一次循环获取渐变色中的一个颜色数值，该数值是通过map函数获取
let c = lerpColor(c1, c2, inter);
stroke(c);
// 画竖线，想一下为什么此循环能实现从左到右的渐变色
line(i, y, i, y + h);
}
}
}
new p5();
