JavaScript未將圖像對象從數組加載到畫布上

我一直在閱讀（並嘗試）我可以在此主題上找到的所有內容，但沒有運氣。我的目標是將來自arr_images的所有圖像源加載到包含圖像對象的數組中，然後在畫布上繪製特定圖像。JavaScript未將圖像對象從數組加載到畫布上

任何幫助非常感謝！提前致謝。

的index.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<title></title> 
<link rel="stylesheet" type="text/css" href="css/main.css"> 
<script src="js/jquery-2.1.4.min.js"></script> 
<script src="js/enginev2.js"></script> 
</head> 
<body> 
<canvas id="main" width="1000" height="500"></canvas> 
</body> 
</html>

enginev2.js

var arr_images = ["images/player.jpg"]; 
var obj_images = []; 

$.each(arr_images, function(key, image) { 
    var img = new Image(); 
    img.src = image; 
    obj_images.push(img); 
}); 

var c = document.getElementById("main"); 
var ctx = c.getContext("2d"); 

$(document).ready(function() { 
    ctx.drawImage(obj_images[0], 0, 0, 100, 100); 
});

來源

2015-12-06 Christian

我的猜測，現在是，當你嘗試繪製圖像加載不正確（文檔可能是之前準備就緒圖像完全加載）。

嘗試使用IMG對象的回調函數調用您的ctx.drawImage功能：

img.onload = drawImage; // calls ctx.drawImage

來源

2015-12-06 18:30:02

var arr_images = ["images/player.jpg"]; 
var obj_images = []; 

$.each(arr_images, function(key, image) { 
    var img = new Image(); 
    img.src = image; 
    obj_images.push(img); 
    img.onload = function() { 
     ctx.drawImage(obj_images[0], 0, 0, 100, 100); 
    } 
}); 

var c = document.getElementById("main"); 
var ctx = c.getContext("2d");

來源

2015-12-06 18:38:17

JavaScript未將圖像對象從數組加載到畫布上

回答

相關問題