變量不能在裏面工作

爲什麼這不起作用？變量不能在裏面工作

var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 


var img = new Image(); 
img.onload = function(){ 
    ctx.drawImage(img,0,0); 
}; 
img.src = 'hero.png';

但這是嗎？

var img = new Image(); 
img.onload = function(){ 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    ctx.drawImage(img,0,0); 
}; 
img.src = 'hero.png';

如何使CTX變量全球，所以我可以在所有功能使用？順便說一句，在所有的教程中，大家都在使用第一種方法...

明白了！

來源

2013-05-05 user2351722

CTX是在主函數中聲明？ – steo 2013-05-05 11:03:36

這是你的全部代碼？ – Mageek 2013-05-05 11:03:56

不是所有的代碼ctx都是在文件開頭聲明的 – user2351722 2013-05-05 11:05:54

我懷疑的原因是時機：如果你的代碼是在script元素以上其中具有id"canvas"你的元素被定義，你的第一個代碼塊將無法找到它在document.getElementById("canvas")調用，因爲它不」現在還沒有。通過等待圖像加載，稍後檢查它是否存在。

如果我是正確的，該解決方案是將script塊移動到body元素的結束，只是你結束</body>標籤（或anywhere after的canvas標籤，真的）前。

例如，而不是：

<!-- ... --> 
<script> 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 


var img = new Image(); 
img.onload = function(){ 
    ctx.drawImage(img,0,0); 
}; 
img.src = 'hero.png'; 
</script> 
<!-- ... --> 
<canvas id="canvas"></canvas> 
<!-- ... --> 
</body>

做到這一點：

<!-- ... --> 
<canvas id="canvas"></canvas> 
<!-- ... --> 
<script> 
var canvas = document.getElementById('canvas'); 
var ctx = canvas.getContext('2d'); 


var img = new Image(); 
img.onload = function(){ 
    ctx.drawImage(img,0,0); 
}; 
img.src = 'hero.png'; 
</script> 
</body>

在文件的底部，把你的腳本是一個好主意反正，更多：YUI Best Practices for Speeding Up your Website

來源

2013-05-05 11:06:55

是的謝謝！從你的第一個答案得到它，但感謝您解釋更多 – user2351722 2013-05-05 11:10:37

@ user2351722：很好的交易，很高興幫助！ – 2013-05-05 11:11:10

我最好的猜測是「線程化」（或事件）。

當你調用getContext，它初始化了一個新的圖形上下文，並在你的瀏覽器嘗試重繪屏幕，它希望它的結果。通常情況下，第一種方法不應該是一個問題，只要它同步運行（換句話說，即：它立即返回）。但是，只要瀏覽器需要異步執行某些操作，它就「厭倦了等待」上下文，並且不必等待結果就重新繪製屏幕，從而使您的上下文無效。然後，您需要初始化一個新的上下文，以便將東西繪製到畫布上。

這顯然依賴於瀏覽器的實現，以及我的猜測只是基於在其他地方的圖形環境（如CoreGraphics中，OpenGL的，等等）會發生什麼。圖形運行在單個線程上，該線程不會簡單地等待趕上其他線程。儘管Javascript抽象了很多，但在構建圖形應用程序時需要記住這一點。

來源

2013-05-05 11:07:37 elslooo

因爲html尚未加載並且#canvas元素不存在。

你可以試試這個：

var canvas, ctx; 
var img = new Image(); 
img.onload = function(){ 
    canvas = document.getElementById('canvas'); 
    ctx = canvas.getContext('2d'); 
    ctx.drawImage(img,0,0); 
}; 
img.src = 'hero.png';

來源

2013-05-05 11:08:26 Louy

或將您的代碼放入window.onload中 – Louy 2013-05-05 11:10:22

變量不能在裏面工作

回答

相關問題