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：最后，图像设置为...... 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之前定义为内联： 。它实际上从哪里获取图像来源？
答案 0 :(得分：1)
关于你的第一个问题：
var images = {};
大括号在javascript中意味着它会创建一个新对象，所以它不是NUL而是一个空对象。 Javascript中的对象类似于数组，但它存储键值对而不是索引值。
了解回调的内容：
回调是一个函数指针，由调用者传递给函数“loadImages”。
source是函数的参数，也是调用者传递的函数。
在以下行中，将从此数组中读取图像URL：
images[src].src = sources[src];
正在创建一个新数组（images [src]）
不，但新项目在数组（数组元素）中创建。
这个加载器功能的缺点是它只会在回调中告诉你图像已经完成 - 但它没有告诉你哪一个！
答案 1 :(得分：1)
我在您的JavaScript内联中添加了评论：
function loadImages(sources, callback){
// "{}" is object literal syntax. images is a new empty object, not null.
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
// In a for..in loop, the variable (src) is the key of the object (sources).
// The value is retrieved via object[key] (eg, sources[src]).
// In the first iteration of this loop, the images object is given a
// property of "darthVader", and "yoda" in the second iteration.
// Note: images[src] does not create a new array, but adds a property
// named the value of src to images using square bracket notation.
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback(images); // "callback" is passed images as a parameter
}
};
images[src].src = sources[src];
}
}
// The "images" parameter referenced here is never used. It's pretty pointless.
// It would be an Event object, so calling it "images" is a misnomer.
window.onload = function(images){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var sources = {
darthVader: "darth-vader.jpg",
yoda: "yoda.jpg"
};
// Don't confuse "images" here with the "images" parameter passed to
// onload. This is the callback's own private parameter. It get's its
// value from the caller.
loadImages(sources, function(images){
context.drawImage(images.darthVader, 100, 30, 200, 137);
context.drawImage(images.yoda, 350, 55, 93, 104);
});
};
编辑：方括号表示法的注释。鉴于此设置：
var obj = {};
var propertyName = "foo";
以下几行是等同的：
obj.foo = 1;
obj["foo"] = 1;
obj[propertyName] = 1;
上述每一行都会将名为“foo”的属性添加到obj。
答案 2 :(得分：1)
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);
});
};