JavaScript圖片無法繪制到畫布

Question

我只是一個完整的菜鳥，一直在尋找答案。 “ctx.fillRect（0,0,100,100）;” 表示ctx已正確聲明並且正在調用“ test（）”的工作。 我只是不明白為什么這張圖不會畫出來。

var Img = new Image();
Img.scr ='/client/Assets/StartScreen/Background.png'; //This URL was tested via html img tag

function test(){
    ctx.fillStyle = 'blue';
    ctx.fillRect(0,0,100,100);  //THIS WORKS
    ctx.drawImage(Img,0,0,600,600); // Will not load
}

Answer 1

Img.scr ='/client/Assets/StartScreen/Background.png'; //This URL was tested via html img tag

Img.scr未定義的屬性。 您應該嘗試使用Img.src

Img.src ='/client/Assets/StartScreen/Background.png';

Answer 2

兩件事情：

• 您的代碼img.scr ，而不是img.src 。
• 圖像加載異步進行； 您需要等待圖像完成（ img.complete ）。 您可以使用onload事件偵聽器在圖像准備就緒后立即繪制內容。

---

var img = new Image();
img.src = "/client/Assets/StartScreen/Background.png";

function draw() {
  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, 100, 100);
  ctx.drawImage(img, 0, 0, 600, 600);
}

img.onload = function() {
  draw();
};

Answer 3

僅應在加載圖像時將其添加到畫布。 嘗試，

var Img = new Image();
Img.src ='/client/Assets/StartScreen/Background.png'; 
Img.onload = function() {
      test();
 }

function test(){
    ctx.fillStyle = 'blue';
    ctx.fillRect(0,0,100,100);  
    ctx.drawImage(Img,0,0,600,600); 

}