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

本文简介

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

在 《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。从画布输出的效果可以看出,图片是被百分百展示出来,并没有裁切过。

p5.js 到底怎么设置背景图?_第1张图片

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

比如

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 光速入门》 。



推荐阅读

《p5.js 光速入门》

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

《p5.js 变换操作》

《p5.js map映射》

《p5.js 状态管理》

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


点赞 + 关注 + 收藏 = 学会了 代码仓库

你可能感兴趣的:(前端)