[英]Javascript not loading image object from array onto canvas
我一直在仔细阅读(并尝试)在该主题上可以找到的所有内容,但是没有运气。 我的目标是将所有图像源从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);
});
我现在的猜测是,当您尝试绘制图像时,图像没有正确加载(在图像完全加载之前,文档可能已准备就绪)。
尝试使用img对象上的函数回调调用ctx.drawImage函数:
img.onload = drawImage; // calls ctx.drawImage
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");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.