变量不能在里面工作

为什么这不起作用？变量不能在里面工作

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

变量不能在里面工作

回答

相关问题