变量范围出方法

Question

我无法理解它是如何可能的。这些属性分配方法（image.onload = function（））＆amp;方法写后..

image.src="barn.jpg";
canvas.width=500;

但是在method.what中使用这些属性的变量Scope呢？

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

                    var image=new Image();

                    image.onload=function(){

                        ctx.drawImage(image,0,0,canvas.width,canvas.height);

                    }
                    image.src="barn.jpg";
                    canvas.width=500;

Answer 1

image.src会导致barn.jpg 开始下载，但浏览器也会继续执行image.src之后的所有代码。

因此，在下载图像时，浏览器也会执行canvas.width=500。

图像完全加载后，它会返回并执行image.onload函数内的任何代码。

因此，您的代码实际按此顺序执行：

1. var canvas = document.getElementById（＆＃34; myConvas＆＃34;）;
2. var ctx = canvas.getContext（＆＃34; 2d＆＃34;）;
3. var image = new Image（）;
4. 当图片完全加载时，浏览器会记下要调用image.onload。但浏览器实际上并没有执行.onload代码。
5. image.src =＆＃34; barn.jpg＆＃34 ;;
6. canvas.width = 500;
7. ctx.drawImage（图像，0,0，canvas.width，canvas.height）;