javascript - 将图像上传到 Canvas p5js

Question

我是p5js的初学者，正在学习如何上传图片。这是我的代码:

PImage img;

function setup() {
  size(1400, 1400)
  img = loadImage("india-map.gif");
}


function draw() {
  background(0)
  image(img, 100, 100);
}

当我运行它时，它说第 1 行有问题。错误消息如下:

SyntaxError: Expected ;but found img.

我不知道这意味着什么，也不知道我应该做什么。谁能帮帮我？

编辑:

我把代码改成了

var image1;


function preload(){
 image1= loadImage("india-map.jpg");
}

function setup(){
  
 creatCanvas(1350,600) 
}

function draw(){
image(image1, 100, 100); 
  
}

我的页面只是说...正在加载，但没有加载任何图像。

Answer 1

除了 kemicofa 的出色回答之外，我认为还需要注意 loadImage 是异步的。这意味着当我们调用 loadImage 时，该方法将需要一些时间来检索图像数据并将其加载到内存中。因此，loadImage 不会像您的其他代码那样立即发生。

因此，当您的图像正在加载时，您的其余代码仍然能够运行，包括 draw 方法。这意味着如果你的 draw 方法只运行一次(你可以使用 noLoop() 让它只运行一次)，你的图像将不会显示，因为它还没有被加载。

这个问题有几个解决方案，例如使用回调。但是，p5js 提供了另一种在 setup 之前运行的方法，称为 preload。在此函数中，您可以加载图像以确保它已准备好供setup 和draw 使用。

使用所有这些想法你最终会得到看起来有点像的代码:

let img;

function preload() {
  img = loadImage('india-map.gif'); // load media and other data
}

function setup() { // only executed once preload is has finished loading data
  createCanvas(400, 400);

}

function draw() { // only executed once preload is has finished loading data
  image(img, 0, 0, width, height);
  noLoop(); // stop draw from looping (to show img has been loaded)
}

您可以找到一个工作示例 here