Как загрузить изображение и сделать его фоном в p5.js - PullRequest
Новая
       58

Как загрузить изображение и сделать его фоном в p5.js

1 голос
/ 09 ноября 2019

Я просто хочу задать простой вопрос, как мне загрузить изображение и сделать его фоном на моем холсте html5 

var bg;

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

function draw() {
  background(bg)
}

Я попробовал этот метод, но на экране отображается только белый экран, яя ищу его, но я не могу найти решение.

1 Ответ

3 голосов
/ 09 ноября 2019

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>
...