Question

嘿，我希望有人可以帮我解决这个问题，基本上我试图通过p5.js库在画布上传一张图片。一旦我加载我的html文件，我得到这个：

我正在使用括号，我已经尝试使用wamp服务器设置Web服务器，但同样的事情发生了。这是代码：

//HomePage.js
var rect = [];
var rooms = [];

function preload() {
    for (var i = 0; i <= 1; i++){
        rooms[i] = loadImage("Raeume/" + i + ".jpg"); 
    }

}

function setup() {
    cnv = createCanvas(1000, 600);   
    }

function mousePressed() {
    var r = floor(random(0, rooms.length));
    var b = new Raeume(mouseX, mouseY, rooms[r]);
    rooms.push(b);
}

function draw() {
    background(0);

    for (var i = rooms.length-1; i >= 0; i--) {
        rooms[i].update();
        rooms[i].display(); 
    }
}
//Raeume.js

function Room (x, y, img) {
    this.x = x;
    this.y = y;
    this.img = img;
    
    this.display = function () {
        imageMode(CENTER);
        image(img, this.x, this.y, 100, 100);
    }

<!DOCTYPE html>
<html>
    <head>
         
    </head>
        <body>
            <h1>Raum 007</h1>
            <script src="p5/p5.min.js"></script>
            <script src="HomePage.js"></script>
            <script src="Raeume.js"></script>
        </body>
</html>

我真的希望你们可以帮我解决这个问题！谢谢！

Answer 1

嗯，首先，你的rooms数组正在保存前两个图像（假设这些是正确的URL），然后你还在mousePressed的末尾添加一个Raeume对象。因此，当您在数组中的每个实体上调用update和display时，可能会抛出一些错误。由于你没有一个例子，很难说出真正的问题是什么，但我想说最可能的问题是你的图像实际上并没有被命名为0.jpg和1.jpg。如果那不是问题，那么你可以尝试在firefox中运行它，因为我认为它对p5.js更友好。

在P5.js中加载图像

1 个答案: