JavaScript無法加載圖像

Question

目前，我已經熟悉HTML 5和Javascript，並且正在嘗試使用Javascript將圖像加載並繪制到HTML 5畫布上。 這是HTML代碼：

<html>
    <head>
        <title>Adam Leung</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script src="js/main.js"></script>
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <h1>pegGame</h1>
        <canvas id="mainCanvas" onload="" onclick="test()" width="800" height="480"></canvas>
        <a><br>by: Adam Leung</a>
    </body>
</html>

這是JavaScript代碼：

function test(){
    var mainCanvas = document.getElementById("mainCanvas");
    var logoImage = new Image();
    logoImage.src = "img/gameLogo.png";
    alert(logoImage.width);
    mainCanvas.getContext("2d").drawImage(logoImage, 0, 0);
}

這是文件結構：

/Site Root
   -/css
      -style.css
   -/img
      -gameLogo.png
   -/js
      -main.js
-index.html

gameLogo.png只是300px x 300px的圖像。 我相信，當我加載index.html並在畫布內單擊時，它將在彈出窗口中打印“ 300”，並將gameLogo.png繪制到畫布上。 當我單擊畫布時，彈出窗口顯示“ 0”並且沒有圖像繪制，這是怎么回事？ （編輯：我正在測試最新版本的Chrome）

非常感謝。

Answer 1

在圖像上添加一個onload處理程序，您應該會很好：

function test(){
    var mainCanvas = document.getElementById("mainCanvas");
    var logoImage = new Image();

    logoImage.onload = loadingDone;      // here before setting src

    logoImage.src = "img/gameLogo.png";

    function loadingDone() {             // gets called when done
        alert(logoImage.width);
        mainCanvas.getContext("2d").drawImage(logoImage, 0, 0);
    }
}

圖像加載是異步的，因此您需要使用回調。 否則，代碼將繼續並嘗試在完成加載之前繪制圖像（結果將顯示為空白圖像）。

還可以使用錯誤回調（ onerror ）。

Answer 2

drawImage()方法需要一個圖像對象。 創建一個圖像並等待其加載，然后再調用drawImage() 。 使用onload方法。

就像是，

  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, 0, 50);
  };
  imageObj.src = '../img/gameLogo.png';

JavaScript無法加載圖像

問題描述

2 個解決方案

解決方案1
3 已采納

解決方案2
1 2014-03-12 04:16:28

JavaScript無法加載圖像

問題描述

2 個解決方案

解決方案1 3 已采納

解決方案2 1 2014-03-12 04:16:28

解決方案1
3 已采納

解決方案2
1 2014-03-12 04:16:28