javascript - 在函数中访问全局变量

Question

好的，这是我的代码，它可以完美地工作，正如它应该的那样。

function setCanvasBackground (src){ 

    var source = document.getElementById('hiddenCanvas');
    var source_ctx = source.getContext('2d');
    var destination = document.getElementById('visibleCanvas');
    var destin_ctx = destination.getContext('2d');

    var img = new Image();
    img.onload = function(){
        source.width = img.width;
        source.height = img.height;
        source_ctx.drawImage(img, 0, 0, img.width, img.height);
        destin_ctx.drawImage(source, 0, 0, img.width/4, img.height/4);
    }
    img.src = src;
};

但是，如果我将变量移到函数外，以便可以从其他函数访问它们，代码就无法正常工作。这是我所做的:

var source = document.getElementById('hiddenCanvas');
var source_ctx = source.getContext('2d');
var destination = document.getElementById('visibleCanvas');
var destin_ctx = destination.getContext('2d');

function setCanvasBackground (src){ 
    var img = new Image();
    img.onload = function(){
        source.width = img.width;
        source.height = img.height;
        source_ctx.drawImage(img, 0, 0, img.width, img.height); 
        destin_ctx.drawImage(source, 0, 0, img.width/4, img.height/4);
    }
img.src = src;
};

所有 JavaScript 代码都在单独的文件中，而不是在 HTML 中。我在这里做错了什么？

Answer 1

试试这个:

var source, source_ctx, destination, destin_ctx;

window.onload=function() {
    source = document.getElementById('hiddenCanvas');
    source_ctx = source.getContext('2d');
    destination = document.getElementById('visibleCanvas');
    destin_ctx = destination.getContext('2d');
}

function setCanvasBackground (src){ 
    // ...
};

您不能在加载元素之前访问它们。这将导致尝试访问不存在的元素。