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>标记之前（或{{3 } 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>

将脚本放在文件的底部是一个好主意无论如何，更多：anywhere after

Answer 2

因为尚未加载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';

Answer 3

我最好的猜测是＆＃34;线程＆＃34; （或事件）。

当您致电getContext时，它会初始化一个新的图形上下文，并且在浏览器尝试重绘您的屏幕之前需要其结果。通常，第一种方法不应该是那么多问题，只要它同步运行（阻塞，换句话说：它立即返回）。但是，一旦您的浏览器需要异步执行某些操作，它就会厌倦等待＆＃34;对于您的上下文，它开始重绘您的屏幕而不等待结果，从而使您的上下文无效。然后，您需要初始化一个新的上下文，以便将内容绘制到画布上。

这显然取决于浏览器＆＃39;实现，我的猜测只基于其他地方的图形环境中发生的事情（如CoreGraphics，OpenGL等）。图形在单个线程上运行，该线程不只是等待赶上其他线程。尽管Javascript抽象了很多，但在构建图形应用程序时需要牢记这一点。

变量不在函数内部工作

3 个答案: