最好的方法使用帆布

Question

我正在與HTML5的Canvas遊戲和我有一些麻煩，在屏幕上獲得的圖像在Javascript中獲得新的圖像。

//player img 
var img1 = new Image(); 
    img1.onload = function() { 
     console.log("image loaded"); 
    }; 
    img1.src = "player.png"; 

該圖像是一個名爲「播放器」的.png文件，並保存在我的桌面上。我在設置src方法時做錯了什麼？有一個更好的方法嗎？我感謝任何幫助。

Answer 1

那麼首先，圖像應該是相對於html文件的路徑，如果你沒有看到的圖像，這可能是因爲你沒有把那相對路徑到你的代碼（您只使用文件名稱暗示該圖像與html文件位於同一目錄中）。

此外，你還沒有表現出任何代碼的圖像與畫布相關聯。這是方法：

// Get the DOM object reference for the canvas element: 
    var canvas = document.getElementById("canvas"); 

    // Get an object reference for the canvas' contextual environment: 
    var ctx = canvas.getContext('2d'); 

    // Instantiate an image to use as the background of the canvas: 
    var img = new Image(); 

    // Make sure the image is loaded first otherwise nothing will draw. 
    img.addEventListener("load", function() { 
     // Draw the image on the canvas at position 0, 0 (top-left): 
     ctx.drawImage(img, 0, 0); 
    }); 

    // Wait until after wiring up the load event handler to set the image source 
    // This example assumes that the image is located in a sub-folder of the current folder, called images. 
    // Your path must be a relative reference to the location where the image is. 
    img.src = "images/starfield.jpg";