代码:
function loadImages(sources, callback){
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
window.onload = function(images){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sources = {
darthVader: "darth-vader.jpg",
yoda: "yoda.jpg"
};
loadImages(sources, function(images){
context.drawImage(images.darthVader, 100, 30, 200, 137);
context.drawImage(images.yoda, 350, 55, 93, 104);
});
};
困惑
function loadImages(sources, callback){
3: 两个参数传递给这个函数,一个本身就是一个函数:回调
var images = {};
4: 最后,images 被设置为 ... nul(?)
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function(){
if (++loadedImages >= numImages) {
callback(images);
5:此时我的大脑一片困惑....
}
};
images[src].src = sources[src];
}
}
window.onload = function(images){
据我了解,
1:参数"images"为空。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sources = {
darthVader: "darth-vader.jpg",
yoda: "yoda.jpg"
};
loadImages(sources, function(images){
2:现在它作为参数传递给这个内联函数——仍然没有指向任何地方……它现在应该调用上面定义的 loadImages 方法……
context.drawImage(images.darthVader, 100, 30, 200, 137);
它从哪里获得 darthvader 的上下文?我只看到“消息来源”上面有 darthVader
context.drawImage(images.yoda, 350, 55, 93, 104);
});
};
来源:http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/
编辑:问题::
从第 4 步到第 5 步:(特别是在第二个 for 循环中),正在创建一个新数组 (images[src]) 并将其传递给 callback() 函数,该函数在第 2 步之前被定义为内联函数: .它实际上从哪里获取源图像?
最佳答案
加载器
function loadImages(sources, callback){
//images is set to an object literal
//this is the same as writing "var images = new Object();
var images = {};
//the counter for the number of images loaded
var loadedImages = 0;
//the total number of images
var numImages = 0;
//count the total number of images to load
for (var src in sources) {
numImages++;
}
//iterate through every image in sources
//"src" will be the key used in the object passed to the function (i.e. "yoda")
for (var src in sources) {
//set image[*keyname*] to a new Image object
//i.e. images.yoda = new Image(), images.darthVader = new Image();
images[src] = new Image();
//attach an onload event listener to the image
images[src].onload = function(){
//add one to the number of images loaded
//if the number of images loaded is equal to the total number of images, call the callback
if (++loadedImages >= numImages) {
//pass the object containing the images to load as a parameter of the callback function
callback(images);
}
};
//set the source of the created image to the src provided in the sources object
//i.e. images.yoda.src = sources.yoda
images[src].src = sources[src];
}
}
用法
window.onload = function(images){
//get the canvas
var canvas = document.getElementById("myCanvas");
//get the drawing context of the canvas
var context = canvas.getContext("2d");
//initialize a new object with two sources
//accessible as sources.darthVader and sources.yoda
var sources = {
darthVader: "darth-vader.jpg",
yoda: "yoda.jpg"
};
//load the images in sources using the provided callback function
loadImages(sources, function(images){
//draw the images that were loaded on the canvas
context.drawImage(images.darthVader, 100, 30, 200, 137);
context.drawImage(images.yoda, 350, 55, 93, 104);
});
};
关于javascript - 有人可以解释这个涉及回调的图像加载器函数吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9133314/