Question

我正在尝试用canvas对象编写一个小流媒体客户端。

这是必要的代码：

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

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

这很好用！图像将被显示。但这不是我想要的。

我想设置一个FPS限制。所以我需要在这个循环中有一个1000ms /帧的“睡眠”。

我尝试过使用SetInterval或SetTimeOut的一些方法。但是他们都没有为我工作。

所以我试着写自己的睡眠：

    var i = 0;
    timeStart = new Date().getTime();

    while (i <= 3000) {
        timeNow = new Date().getTime();
        timeDifference = timeNow - timeStart;
        if (timeDifference > 1000*i) {
            this.addPicture("Pictures/Wildlife/" + i + '.bmp', 1, 1);
            i = i + 1;
        }
    }

我在循环之前保存了实际的日期时间，并且正好在时差达到1000毫秒时我正在尝试加载图片并增加i。

我的问题：当我使用alert（i）而不是this.addPicture执行此操作时它工作正常！我每1000毫秒（每秒钟）收到一次警报

当我像上面的例子那样（使用this.addPicture）时，浏览器只是加载自己，直到我收到一个无法加载页面的错误。但我没看到任何照片！

这是我的addPicture函数：

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

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

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

有人知道为什么它适用于警报但不适用于addPicture？因为当我不使用时间戳（第一个代码示例）时，它工作正常！

Answer 1

在你的ctx.drawImage中，imageObj之后的2个参数是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

}

画布drawimage循环与超时

1 个答案: