Javascript 为什么这些变量是；未定义的“；？

我有以下代码：

var canvasData;
var canvas2imgval;

imageObj1.onload = function() {
    ctx.drawImage(imageObj1, 0, 0, wdOb1, hgOb1);
    imageObj2.onload = function() {
        ctx.drawImage(imageObj2, imgposLeft, imgposTop, wdOb2, hgOb2);
        //img = c.toDataURL("image/png");
        //document.write('<img src="' + img + '" width="256" height="256"/>');
        //canvas2img
        canvasData = c.toDataURL("image/png");
    }

}
console.log("canvasData : "+canvasData ); 
$("#canvas2img").val(canvasData) ;
canvas2imgval = $("#canvas2img").val() ;
console.log("canvas2imgval1 : "+canvas2imgval ); 

var-canvasData；
var canvas2imgval；
imageObj1.onload=函数（）{
ctx.drawImage（图像OBJ1、0、0、wdOb1、hgOb1）；
imageObj2.onload=函数（）{
ctx.drawImage（图像OBJ2、imgposLeft、imgposTop、wdOb2、hgOb2）；
//img=c.toDataURL（“图像/png”）；
//文件。写（“”）；
//拉票
canvasData=c.toDataURL（“图像/png”）；
}
}
log（“canvasData:+canvasData”）；
$（“#canvas2img”）.val（canvasData）；
canvas2imgval=$（“#canvas2img”）.val（）；
log（“canvas2imgval1:+canvas2imgval”）；

问题是当我查看这两个变量的值时，

canvasData

是

undefined

并且

canvas2imgval1

没有值。

---

我不知道我的代码出了什么问题。通常，这两个变量用JavaScript关键字

var

标记为public，您可以在image

onload

事件处理程序中为这些变量赋值，但在执行这些处理程序之前尝试访问它们

为了使用这些变量，您可以创建一个函数，该函数将在执行

imageObj2.onload

后调用。我还建议将

canvasData

作为参数传递，而不是使用全局变量（只要它不在其他地方使用）

var canvas2imgval；
var后载=功能（canvasData）{
log（“canvasData:+canvasData”）；
$（“#canvas2img”）.val（canvasData）；
canvas2imgval=$（“#canvas2img”）.val（）；
log（“canvas2imgval1:+canvas2imgval”）；
}    
imageObj1.onload=函数（）{
ctx.drawImage（图像OBJ1、0、0、wdOb1、hgOb1）；
imageObj2.onload=函数（）{
ctx.drawImage（图像OBJ2、imgposLeft、imgposTop、wdOb2、hgOb2）；
//img=c.toDataURL（“图像/png”）；
////////文件。写（“”）；
//拉票
canvasData=c.toDataURL（“图像/png”）；
后装（画布数据）；
}
}

在image

onload

事件处理程序中为这些变量赋值，但在执行这些处理程序之前尝试访问它们

为了使用这些变量，您可以创建一个函数，该函数将在执行

imageObj2.onload

后调用。我还建议将

canvasData

作为参数传递，而不是使用全局变量（只要它不在其他地方使用）

var canvas2imgval；
var后载=功能（canvasData）{
log（“canvasData:+canvasData”）；
$（“#canvas2img”）.val（canvasData）；
canvas2imgval=$（“#canvas2img”）.val（）；
log（“canvas2imgval1:+canvas2imgval”）；
}    
imageObj1.onload=函数（）{
ctx.drawImage（图像OBJ1、0、0、wdOb1、hgOb1）；
imageObj2.onload=函数（）{
ctx.drawImage（图像OBJ2、imgposLeft、imgposTop、wdOb2、hgOb2）；
//img=c.toDataURL（“图像/png”）；
////////文件。写（“”）；
//拉票
canvasData=c.toDataURL（“图像/png”）；
后装（画布数据）；
}
}

canvasData=c.toDataURL（“image/png”）什么是
c
<代码>canvas2imgval=$（“#canvas2img”）.val（）该元素是否存在？在image onload事件处理程序中为这些变量赋值，但在执行这些处理程序之前尝试访问它们。在加载imageObj1之前使用这些变量。这是HTTP请求，您的浏览器将加载HTML，然后加载javascript，然后加载其他对象。这两个变量在imageObj1的onload事件运行之前不会有值。如果在将函数分配给imageObj1.onload后立即查看它们的值，则它们将是未定义的。c变量是保存画布元素的变量，我要在其上合并我的两个图像：
canvasData=c.toDataURL（“image/png”）什么是
c
<代码>canvas2imgval=$（“#canvas2img”）.val（）该元素是否存在？在image onload事件处理程序中为这些变量赋值，但在执行这些处理程序之前尝试访问它们。在加载imageObj1之前使用这些变量。这是HTTP请求，您的浏览器将加载HTML，然后加载javascript，然后加载其他对象。这两个变量在imageObj1的onload事件运行之前不会有值。如果在将函数分配给imageObj1.onload后立即查看它们的值，则它们将是未定义的。c变量是保存画布元素的变量，我要在其上合并我的两个图像：
var canvas2imgval;
var afterLoad = function(canvasData){
    console.log("canvasData : "+canvasData ); 
    $("#canvas2img").val(canvasData) ;
    canvas2imgval = $("#canvas2img").val() ;
    console.log("canvas2imgval1 : "+canvas2imgval); 
}    

imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, wdOb1, hgOb1);
    imageObj2.onload = function() {
        ctx.drawImage(imageObj2, imgposLeft, imgposTop, wdOb2, hgOb2);
        //img = c.toDataURL("image/png");
        ////////document.write('<img src="' + img + '" width="256" height="256"/>');
        //canvas2img
        canvasData = c.toDataURL("image/png");
        afterLoad(canvasData);
    }

}