在画布上的JavaScript load图像与JCanvaScript [英] Javascript load images in canvas with JCanvaScript
问题描述
我使用JcanvaScript库HTML5画布的工作，现在我想在我的画布加载一些图像，但只有最后的图像加载成功，我看不到任何其他的图像，但最后一个，我不知道什么是错我的code。
这里是code
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;风格＆GT;
帆布{
边框：1px的固体＃9C9898;
}
＆LT; /风格＆GT;
＆所述; SCRIPT SRC =jcanvas / jCanvaScript.1.5.15.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;
变种imagesUrl = [];
变种imagesObj = [];
VAR canvasWidth = 800;
VAR canvasHeight = 600;
VAR imagesId preFIX ='images_';
VAR帆布=帆布;
VAR FPS = 60; imagesUrl.push（图像/ image1.jpg）;
imagesUrl.push（图像/ image2.jpg'）;
imagesUrl.push（图像/ image3.jpg'）;
imagesUrl.push（图像/ image4.jpg'）; 功能的init（）{
对于（i = 0; I＆LT; imagesUrl.length;我++）{
VAR xImage =新的图像（）;
xImage.src = imagesUrl [I]
xImage.onload =功能（）{
jc.start（帆布，FPS）;
jc.image（xImage，我* 10，0，200，200）
.ID（imagesId prefix.toString（）+ i.toString（））;
jc.start（帆布，FPS）;
}
imagesObj.push（xImage）;
}
} ＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体的onload =的init（）＆GT;
＆LT;帆布ID =画布WIDTH =800像素HEIGHT =600px的＆GT;＆LT; /帆布＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
这个bug已经被注释MrOBrian已经确定：在onload回调被调用时，我有它在循环结束时的价值。这就是为什么你认为只有最后的图像加载成功。
一个标准解决方案是embbed回路的内容中的封闭保持i的值：
为（i = 0; I＆LT; imagesUrl.length;我++）{
（函数（ⅰ）{
VAR xImage =新的图像（）;
xImage.src = imagesUrl [I]
xImage.onload =功能（）{
jc.start（帆布，FPS）;
jc.image（xImage，我* 10，0，200，200）
.ID（imagesId prefix.toString（）+ i.toString（））;
jc.start（帆布，FPS）;
}
imagesObj.push（xImage）;
}）（一世）;
}
编辑：
当你想确保所有需要的图像运行某些code之前加载，您可以使用此功能：
函数onLoadAll（图片，回调）{
变种N = 0;
为（变量I = images.length; I - 大于0）{
如果（图像[I] .WIDTH == 0）{
Ñ++;
图像[I] .onload =功能（）{
如果（--N == 0）回调（）;
};
}
}
如果（N == 0）回调（）;
}
图像必须被首先提供自己的SRC。您调用函数是这样的：
onLoadAll（imagesObj，函数（）{
//做一些imagesObj
}）;
I am using JcanvaScript library to work with Html5 canvas and now I want to load some images in my Canvas, but only last image loading is successful, I can't see any other images but the last one and I don't know what is wrong with my code.
here is the code
<!DOCTYPE HTML>
<html>
<head>
<style>
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="jcanvas/jCanvaScript.1.5.15.js"></script>
<script>
var imagesUrl = [];
var imagesObj = [];
var canvasWidth = 800;
var canvasHeight = 600;
var imagesIdPrefix = 'images_';
var canvas = "canvas";
var fps = 60;
imagesUrl.push('images/image1.jpg');
imagesUrl.push('images/image2.jpg');
imagesUrl.push('images/image3.jpg');
imagesUrl.push('images/image4.jpg');
function init(){
for (i = 0; i < imagesUrl.length; i++){
var xImage = new Image();
xImage.src = imagesUrl[i];
xImage.onload = function(){
jc.start(canvas, fps);
jc.image(xImage, i*10, 0, 200, 200)
.id(imagesIdPrefix.toString() + i.toString());
jc.start(canvas, fps);
}
imagesObj.push(xImage);
}
}
</script>
</head>
<body onload="init()">
<canvas id="canvas" width="800px" height="600px"></canvas>
</body>
</html>
The bug has been identified in comment by MrOBrian : when the onload callbacks are called, i has the value it has at the end of the loop. That's the reason why you think that only last image loading is successful.
A standard solution is to embbed the content of the loop in a closure keeping the value of i :
for (i = 0; i < imagesUrl.length; i++){
(function(i){
var xImage = new Image();
xImage.src = imagesUrl[i];
xImage.onload = function(){
jc.start(canvas, fps);
jc.image(xImage, i*10, 0, 200, 200)
.id(imagesIdPrefix.toString() + i.toString());
jc.start(canvas, fps);
}
imagesObj.push(xImage);
})(i);
}
EDIT :
when you want to ensure all the needed images are loaded before running some code, you may use this function :
function onLoadAll(images, callback) {
var n=0;
for (var i=images.length; i-->0;) {
if (images[i].width==0) {
n++;
images[i].onload=function(){
if (--n==0) callback();
};
}
}
if (n==0) callback();
}
The images must have been provided their src first. You call the function like this :
onLoadAll(imagesObj, function(){
// do something with imagesObj
});
这篇关于在画布上的JavaScript load图像与JCanvaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
