p5.js | 背景()函数

background()函数是p5.js里面一个非常常用的函数，它用于设置画布的背景颜色。在 setup() 函数中调用它可以设置初始背景颜色，而在 draw() 函数中调用它则可以刷新页面并设置新的背景颜色。

语法

background(red, green, blue)

background(gray)

background(img)

• red, green, blue: 用来定义RGB颜色的值，每个值的范围是0~255之间的整数。
• gray: 用一个0~255之间的整数定义灰度值。
• img: 用一个p5.js图片对象来作为背景。

示例

function setup() {
  createCanvas(400, 400);
  background(220, 0, 200);
}

function draw() {
  background(0, 200, 220);
  // 其他绘图操作...
}

上面的代码创建了一个宽度和高度都为400像素的画布，并在 setup() 函数中设置了初始背景颜色是紫色。在 draw() 函数中，背景颜色被设置为蓝绿色。每次循环时背景颜色都会被刷新并变成蓝绿色。

附加特性

简写RGB颜色值

在 background() 函数中可以使用一个参数同时定义RGB颜色的值。例如：

background(255, 0, 0); // 设置背景颜色为红色
background(0, 255, 0); // 设置背景颜色为绿色

使用灰度值

除了RGB颜色外，还可以使用一个0~255之间的整数来作为灰度值。灰度值越小，则画布越暗，反之则越亮。例如：

background(0); // 设置背景颜色为黑色
background(255); // 设置背景颜色为白色

使用图片作为背景

除了使用颜色之外，还可以用p5.js图片对象作为背景。例如：

let img;

function preload() {
  img = loadImage('assets/background.jpg');
}

function setup() {
  createCanvas(600, 400);
  background(img);
}

function draw() {
  // 其他绘图操作...
}

注意：如果要使用图片作为背景，则需要先在 preload() 函数中载入图片。