如何在 p5.js 中加载图像并将其作为背景

Question

我只想问一个简单的问题，如何加载图像并将其作为我的 html5 画布中的背景

var bg;

function setup() {
  createCanvas(600,400)
  bg = loadImage("https://mcdn.wallpapersafari.com/medium/1/92/T1iecJ.jpg")
}

function draw() {
  background(bg)
}

我试过那个方法，但屏幕只显示白屏，我已经搜索过了，但我找不到解决方案。

Answer 1

loadImage不加载图像synchronously。图像可能无法立即用于渲染。

使用该preload()函数，确保在draw()执行之前加载图像。setup将等到其中的任何加载调用preload()完成。

var bg;

function preload(){
    bg = loadImage("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/background.jpg")
}

function setup() {
    createCanvas(600,400)
}

function draw() {
    background(bg)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>