Javascript 使用javascrip在1页html的多个画布上绘制多个图像

我找到了在画布上绘制多幅图像的方法

以及在一页上绘制多个画布的方法

但当我尝试绘制多个画布时，每个画布都包含多个图像加载，这不起作用。 只有最后一个画布可以加载图像，而其他画布不能。 你能帮我解决这个问题吗？ 我的代码是

enter code here
var CanvasList = document.getElementsByClassName("listCanvas");
for (var i = 0; i < CanvasList.length; i++) {
    var canvas = CanvasList[i]
    ctx = canvas.getContext('2d');



    var img_Original = new Image();
    img_Original.src = '../Images/hizume.jpg';
    img_Original.onload = function () {
        canvas.height = img_Original.height;
        canvas.width = img_Original.width;
        ctx.drawImage(img_Original, 0, 0);
    };

在此处输入代码
var CanvasList=document.getElementsByClassName（“listCanvas”）；
for（var i=0；i

var strPart=CanvasList[i].id

    do {
        var index = strPart.indexOf(",")
        var partGet = strPart.substring(0, index);
        if (partGet.length == 1) {
            partGet = "0" + partGet;
        }
        var source = "../Images/hizume_" + partGet + "_multi.png";
        var nextImg = new Image();
        nextImg.src = source;
        Img.push(nextImg);
        strPart = strPart.substring(index + 1);

    }
    while (strPart.length > 0);

    partCount = Img.length;
    Img[partCount - 1].onload = function () {
        ctx.drawImage(img_Original, 0, 0);
        for (var j = 0; j < partCount; j++) {
            ctx.drawImage(Img[j], 0, 0);

        }

    }
}

do{
var index=strPart.indexOf（“，”）
var partGet=strPart.substring（0，索引）；
if（partGet.length==1）{
partGet=“0”+partGet；
}
var source=“../Images/hizume”+partGet+“\u multi.png”；
var nextImg=新图像（）；
nextImg.src=来源；
Img.push（下一个Img）；
strPart=strPart.substring（索引+1）；
}
而（strPart.length>0）；
零件数量=Img.长度；
Img[partCount-1]。onload=函数（）{
ctx.drawImage（原始图像，0,0）；
对于（var j=0；j

为什么使用c#tag？？？？？我正在使用c#创建此asp.net mvc项目请尝试放置

让ctx=…

&<代码>让画布=。等等。您的异步代码将失去作用域。

strPart

变量在使用之前未定义。@Keith非常感谢，它可以在画布上加载图像，但所有画布与上一个画布相同：（我怎样才能更正它？