在函數中訪問全局變量

好的，這裏是我的代碼完美工作，正如它應該的那樣。在函數中訪問全局變量

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。我在這裏做錯了什麼？

來源

2013-07-31 Maxim Ershov

可能試圖選擇尚未加載到DOM中的元素。首先你應該看看你的瀏覽器的開發者控制檯。 –

您可以通過_assigning_值將其修改爲setCanvasBackground中的全局變量，或者在window.onload或document/ready處理程序中執行。 – 2013-07-31 00:11:18

你可以在JSFiddle上重現正在運行的示例嗎？ – hugomg

試試這個：

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){ 
    // ... 
};

之前加載它們，您不能訪問的元素。這將導致嘗試訪問不存在的元素。

來源

2013-07-31 00:24:44

我只是做了同樣的改變 - 我在window.onload函數中聲明瞭變量，但它完美地工作 –

有一兩件事你可以做的是增加一個回調到setCanvasBackground：

function setCanvasBackground(src, callback) { 
    [...snip...] 
    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); 

     // all set now: 
     callback(source, source_ctx, destination, destin_ctx); 
    } 
    [...snip...] 
}

...然後，當你調用setCanvasBackground，添加一個不會被調用，直到圖像完成功能正在加載：

setCanvasBackground(..., function(src, src_ctx, dest, dest_ctx) { 
    alert("source.width: " + src.width); 
});

來源

2013-07-31 00:32:58

在函數中訪問全局變量

回答

相關問題