Question

我有几幅画布。我也有几个图片网址。我想在画布上画出所有图片。绘图功能有问题。绘制图像仅在图像完全加载时起作用，但我必须在加载时绘制图像。我写了以下代码：

for (var i = 2; i < length; i++) {
    canvid[i] = "canv" + i;
    img[i] = new Image();

    img[i].src = "..\\images\\UploadImage\\"+ name + i + ".jpg";

    img[i].onload = function () { 
        var c = document.getElementById(canvId[i]);
        var cDraw = c.getContext("2d");
        cDraw.drawImage(img[i], 0, 0);
    };

我知道这段代码有错误，它是一种伪代码来显示我想要的东西。

Answer 1

将你的逻辑放在

中

$(documet).ready(function(){

   //logic
});

Answer 2

答案在以下链接中

stack overflow link

当您想要调用图像变量上的click事件时，您必须等待它所以你不能使用循环，你必须在加载事件上对下一个图像进行下一次调用。

 var loadImages = function (imageURLarray) {
                if (!(startPage < pages))
                    return;
                canvid = "canv" + i;
                img.src = imageURLarray[startPage];
                // your top code
                img.onload = function (e) {
                    // code, run after image load
                    var c = document.getElementById(canvid);
                    var cDraw = c.getContext("2d");
                    cDraw.drawImage(img, 0, 0);
                    startPage++;
                    loadImages(imageURLarray);
                }
            }

            loadImages(imageURLarray);

具有onclick事件的动态图像变量

2 个答案: