室内设计联盟官方网站入口,项目建设网站大全,河北专业网站建设,中国建设银行网站晋阳支行本文简介
点赞 关注 收藏 学会了
在 《p5.js 光速入门》 里我们学过加载图片元素#xff0c;学过过背景色的用法#xff0c;但当时没提到背景图要怎么使用。
本文就把背景图这部分内容补充完整#xff0c;并且会提到在 p5.js 里使用背景图的一些注意点。 背景图的用法…本文简介
点赞 关注 收藏 学会了
在 《p5.js 光速入门》 里我们学过加载图片元素学过过背景色的用法但当时没提到背景图要怎么使用。
本文就把背景图这部分内容补充完整并且会提到在 p5.js 里使用背景图的一些注意点。 背景图的用法
在 p5.js 里使用背景图只需做以下几步操作即可。
使用 loadImage() 加载图片资源。使用 background() 设置背景图。
// 创建画布并加载图片
function setup() {// 创建一个 500x500 的画布createCanvas(500, 500)// 加载图片let bg loadImage(../images/bg.png)// 设置背景图background(bg)
}
上面这种写法是错的 正确的写法是先加载好图片再绘制。
p5.js 官网上的案例是这样写的。
let bg nullfunction setup() {createCanvas(500, 500)// 加载图片bg loadImage(../images/bg.png)
}function draw() {// 将图片添加到背景里background(bg)
}
出来的结果是这样 在这个例子中我准备的图片的尺寸是 3073*3072而画布的尺寸是 500*500。从画布输出的效果可以看出图片是被百分百展示出来并没有裁切过。 如果画布和背景图的宽高比不一致画布会被拉伸。
比如 let bg nullfunction 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 nullfunction 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后如何使用》 点赞 关注 收藏 学会了 代码仓库
