javascript - 变量在函数内部不起作用

Question

为什么这不起作用？

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 变量 成为全局变量以便我可以在所有函数中使用？顺便说一句，在所有教程中，每个人都使用第一种方法...

成功了!

Answer 1

我怀疑原因是时机:如果您的代码在 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