p5.js 到底怎么设置背景图？

theme: smartblue

本文简介

在 《p5.js 光速入门》 里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。

本文就把背景图这部分内容补充完整，并且会提到在 p5.js 里使用背景图的一些注意点。

背景图的用法

在 p5.js 里使用背景图只需做以下几步操作即可。

1. 使用 loadImage() 加载图片资源。
2. 使用 background() 设置背景图。

// 创建画布并加载图片
function setup() {
  // 创建一个 500x500 的画布
  createCanvas(500, 500)
  // 加载图片
  let bg = loadImage('../images/bg.png')
  // 设置背景图
  background(bg)
}

上面这种写法是错的！！！

正确的写法是先加载好图片再绘制。

p5.js 官网上的案例是这样写的。

let bg = null

function setup() {
  createCanvas(500, 500)
  // 加载图片
  bg = loadImage('../images/bg.png')
}

function draw() {
  // 将图片添加到背景里
  background(bg)
}

出来的结果是这样

在这个例子中，我准备的图片的尺寸是 3073*3072，而画布的尺寸是 500*500。从画布输出的效果可以看出，图片是被百分百展示出来，并没有裁切过。

如果画布和背景图的宽高比不一致，画布会被拉伸。

比如

let bg = null

function setup() {
  createCanvas(800, 300)
  // 加载图片
  bg = loadImage('../images/bg.png')
}

function draw() {
  // 将图片添加到背景里
  background(bg)
}

由此可见，使用 background() 设置背景图，图片会根据画布的宽高自动拉伸适配。

而使用 image() 方法渲染图片的时候默认是按照图片自身的尺寸进行渲染。

这是两者之间的不同。

更优的写法

结合前面的几个例子，可能有工友会有点疑问。

为什么在 setup() 里一次性把图片加载并添加到背景是错误的写法呢？

因为图片作为一种资源文件加载肯定是需要时间的，在没加载完就使用的话会比较容易出问题。

所以在 p5.js 官网的例子中，会在 setup() 里加载图片资源，然后在 draw() 里再把图片绘制出来。

但其实还有更安全的写法。

p5.js 提供了一个 preload() 的生命周期，这个生命周期的执行时间比 setup() 要早。preload() 通常用作资源加载，比如需要加载图片或者视频的时候会写在这里。

let bg = null

function preload() {
  // 加载图片
  bg = loadImage('../images/bg.png')
}

function setup() {
  // 创建画布
  createCanvas(500, 500)
}

function draw() {
  // 将图片添加到背景里
  background(bg)
}

以上就是本期的所有内容，关于 p5.js 生命周期方面的知识还不太了解的工友可以看看 《p5.js 光速入门》 。