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

---

theme: smartblue

本文简介

点赞 + 关注 + 收藏 = 学会了

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

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

背景图的用法

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

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

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

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

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

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

```js let bg = null

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

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

出来的结果是这样

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

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

比如

```js 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() 通常用作资源加载，比如需要加载图片或者视频的时候会写在这里。

```js let bg = null

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

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

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

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

推荐阅读

《p5.js 光速入门》

《p5.js 3D图形-立方体》

《p5.js 变换操作》

《p5.js map映射》

《p5.js 状态管理》

《p5.js 使用npm安装p5.js后如何使用？》

点赞 + 关注 + 收藏 = 学会了