javascript - 陷入 javascript 闭包范围的困境，直到我的大脑变成了炒鸡蛋

Question

编辑:我刚刚发现了一些适用于每个页面加载的东西，除了第一次(硬)加载。这是一个“让它工作的奇怪提示”，因为它不使用 onload。例如

这适用于负载 2...n:

case String:
        var img = new Image();
        img.onload = function() {
            //context.drawImage(img,0,0);
        };
        img.src = detail;
        context.drawImage(img,0,0);

这不适用于任何负载 1...n:

case String:
        var img = new Image();
        img.onload = function() {
            context.drawImage(img,0,0);
        };
        img.src = detail;
        //context.drawImage(img,0,0);

错过了最重要的负载(第一个)我不是很高兴，但至少有一些进步。

有人可以指导我解释这里发生了什么吗？我真的很困惑。我希望图像每次都能加载并绘制到 Canvas 上。这是不切实际的期望吗？

我在 Ubuntu 上使用 FF 7.0.1，我的用户代理是:Mozilla/5.0 (X11; Linux i686; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

编辑:在评论中尝试了所有方法后仍然失败。我会继续考虑的。我认为这与 Canvas 不再可访问有关(即使变量正确解析并且在 FF 下的 JS 调试器中没有抛出错误)。

我正在编写一个用于渲染到 Canvas 的 js 框架，以提供一个简单的 API 来编写 GUI，与使用 Canvas API 相比，代码更少，代码更漂亮。它只是 Canvas 的包装。但我不是 js 专家，即使我喜欢 js，现在无论如何。

闭包中的以下代码可以执行和访问 img 变量的范围，可以在图像加载范围内引发警告表单，可以更改 img css 样式属性，但不会在 Canvas 上下文中执行 drawImage上下文变量。

在闭包之前 context.fillRect 可以正常工作，但在闭包内部就不行了。我认为我还没有学到一些基本的东西，因为我之前用闭包代码编写了类似的 onload 并且一切正常。希望今天是我学到新东西的一天。

RenderProvider.prototype.drawImage = function(srcElement,context,state,detail) {
    if(detail == undefined || detail == null) {
        alert("Image is not present. Ignoring.");
        return;
    }   
    switch(detail.constructor) { 
        case String:
                alert("Image is from String");
                var img = new Image();
                img.src = detail;//'t.jpg';//'Star-Field.gif';//http://www.google.com/favicon.ico';
                img.onload = function (e) { 
                    alert('Drawing ' + img + ' to ' + context);
                    alert('Context dim ' + context.canvas.width + ',' + context.canvas.height );
                    context.drawImage(img,20,20);
                    return true;
                };          
                img.src = detail;//'t.jpg';//'Star-Field.gif';//'http://www.google.com/favicon.ico';
                break;

Answer 1

我做了一个jsfiddle如果你想玩它，那是可行的。

var img = new Image();
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
img.src = 'http://www.google.com/favicon.ico';
img.onload = function() {
    context.drawImage(this, 20, 20); 
}​

请注意，我在回调函数中使用 this 而不是 img。 img 也可以，但更常用的是使用 this。此外，您可以在回调函数定义之后加入 img.src = ...，它仍然有效。