Javascript 带超时的canvas drawimage循环

我正在尝试用canvas对象编写一个小型流式客户端

这是必要的代码：

this.drawPictures = function() {
    var i = 0;

    while (i <= 3000) {
        this.addPicture("Pictures/Wildlife/" + i + '.bmp', 1, 1);
        i = i + 4;
    }
}

---

有人知道为什么它与alert一起工作，而与addPicture不一起工作吗？因为当我不使用时间戳（第一个代码示例）时，它工作得很好

在ctx.drawImage中，imageObj后面的两个参数是X/Y而不是图像大小

您需要留出足够的时间加载图像（1秒不够）

addPicture开始（但未完成）加载图像，但在再次调用addPicture时图像尚未完全加载

有很多图像加载程序…这里有一个：

var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("myPicture1.png");
imageURLs.push("myPicture2.png");
imageURLs.push("myPicture3.png");
imageURLs.push("myPicture4.png");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]
    // Start your timer and display your pictures with addPicture

}

var-imageURLs=[]；//将图像的路径放在这里
var-imagesOK=0；
var-imgs=[]；
push（“myPicture1.png”）；
push（“myPicture2.png”）；
push（“myPicture3.png”）；
push（“myPicture4.png”）；
加载图像（开始）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
回调（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
函数start（）{
//imgs[]数组保存完全加载的图像
//imgs[]与ImageURL[]的顺序相同
//启动计时器并使用addPicture显示图片
}

this.addPicture = function (cPicPath, nSizeX, nSizeY) {

    var imageObj = new Image();
    imageObj.onload = function () {

        ctx.drawImage(imageObj, nSizeX, nSizeY);
    }
    imageObj.src = cPicPath;
}

var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("myPicture1.png");
imageURLs.push("myPicture2.png");
imageURLs.push("myPicture3.png");
imageURLs.push("myPicture4.png");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){

    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]
    // Start your timer and display your pictures with addPicture

}