本文简介
点赞 + 关注 + 收藏 = 学会了
在 《p5.js 光速入门》 里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。
本文就把背景图这部分内容补充完整，并且会提到在 p5.js 里使用背景图的一些注意点。
<br>
<br>
背景图的用法
在 p5.js 里使用背景图只需做以下几步操作即可。
- 使用
loadImage()加载图片资源。 - 使用
background()设置背景图。
// 创建画布并加载图片
function setup() {
// 创建一个 500x500 的画布
createCanvas(500, 500)
// 加载图片
let bg = loadImage('../images/bg.png')
// 设置背景图
background(bg)
}
上面这种写法是错的！！！
<br>
正确的写法是先加载好图片再绘制。
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)
}
<br>
由此可见，使用 background() 设置背景图，图片会根据画布的宽高自动拉伸适配。
而使用 image() 方法渲染图片的时候默认是按照图片自身的尺寸进行渲染。
这是两者之间的不同。
<br>
<br>
更优的写法
结合前面的几个例子，可能有工友会有点疑问。
为什么在 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)
}
<br>
以上就是本期的所有内容，关于 p5.js 生命周期方面的知识还不太了解的工友可以看看 《p5.js 光速入门》 。
<br>
<br>
推荐阅读
<br>
点赞 + 关注 + 收藏 = 学会了 代码仓库