Loading Image in P5.js

嘿，我希望有人能幫助我解決這個問題，基本上我試圖通過p5.js庫在我的畫布上傳圖片。而且只要我打開我的html文件，我得到這個：Loading Image in P5.js

我用的支架，我已經嘗試過建立與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>

我真的希望你們能幫助我在這一個！謝謝！

來源

2017-05-30 Benji

你期望看到什麼？你檢查過開發者控制檯嗎？你能鏈接到CodePen或JSFiddle嗎？這些圖片是否在您指定的網址上？ –

好吧，其中之一，你的rooms數組是持有前兩個圖像（假設這是正確的網址），然後你還添加一個Raeume對象到mousePressed結束。因此，當您調用更新並顯示數組中的每個實體時，它可能會引發一些錯誤。因爲你沒有一個例子，所以很難分辨出真正的問題，但我想說最可能的問題是你的圖像實際上並沒有命名爲0.jpg和1.jpg。如果這不是問題，那麼你可以嘗試在Firefox中運行它，因爲我認爲它對p5.js更友好。

來源

2017-06-13 14:05:22

Loading Image in P5.js

回答

相關問題