Javascript没有将图像对象从数组加载到画布上答案

【问题标题】：Javascript not loading image object from array onto canvasJavascript没有将图像对象从数组加载到画布上
【发布时间】：2016-03-11 07:26:52
【问题描述】：

我一直在阅读（并尝试）我能找到的关于这个主题的所有内容，但没有运气。我的目标是将 arr_images 中的所有图像源加载到包含图像对象的数组中，然后将特定图像绘制到画布上。

非常感谢任何帮助！提前致谢。

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);
});

【问题讨论】：

标签： javascript html canvas drawimage

【解决方案1】：

我现在的猜测是，当您尝试绘制它时，您的图像没有正确加载（文档可能在图像完全加载之前就准备好了）。

尝试使用 img 对象上的函数回调来调用 ctx.drawImage 函数：

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

【讨论】：

【解决方案2】：

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");

【讨论】：