编码:
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]),并将其传递给在第 2 步之前定义为内联的 callback() 函数:。它实际上从哪里获取源中的图像?