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

Question

我一直在仔細閱讀（並嘗試）在該主題上可以找到的所有內容，但是沒有運氣。 我的目標是將所有圖像源從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);
});

Answer 1

我現在的猜測是，當您嘗試繪制圖像時，圖像沒有正確加載（在圖像完全加載之前，文檔可能已准備就緒）。

嘗試使用img對象上的函數回調調用ctx.drawImage函數：

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

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

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

問題描述

2 個解決方案

解決方案1
2 2015-12-06 18:30:02

解決方案2
0

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

問題描述

2 個解決方案

解決方案1 2 2015-12-06 18:30:02

解決方案2 0

解決方案1
2 2015-12-06 18:30:02

解決方案2
0