html5畫布drawimage背景+ 9張圖像

Question

我有一個小問題，有時工作或不工作drawimage，我嘗試從繪制背景開始，如果繪制，則下一個繪制9張圖像（有時圖像是相同的還是不相同的）。

var c = document.getElementById('myCanvas');
    var ctx = c.getContext("2d");

    $('button').on('click',function(){

        var img = new Image();
        var img1 = new Image();
        var img2 = new Image();
        var img3 = new Image();
        var img4 = new Image();
        var img5 = new Image();
        var img6 = new Image();
        var img7 = new Image();
        var img8 = new Image();
        var img9 = new Image();
        img.src = $(location).attr('href')+'/img/frames/'+$('#frames option:selected').val();
        img1.src = $(location).attr('href')+'/img/mercmain/'+$('#merc1 option:selected').val();
        img2.src = $(location).attr('href')+'/img/mercmain/'+$('#merc2 option:selected').val();
        img3.src = $(location).attr('href')+'/img/mercmain/'+$('#merc3 option:selected').val();
        img4.src = $(location).attr('href')+'/img/mercmain/'+$('#merc4 option:selected').val();
        img5.src = $(location).attr('href')+'/img/mercmain/'+$('#merc5 option:selected').val();
        img6.src = $(location).attr('href')+'/img/mercmain/'+$('#merc6 option:selected').val();
        img7.src = $(location).attr('href')+'/img/mercmain/'+$('#merc7 option:selected').val();
        img8.src = $(location).attr('href')+'/img/mercmain/'+$('#merc8 option:selected').val();
        img9.src = $(location).attr('href')+'/img/mercmain/'+$('#merc9 option:selected').val();

        img.onload = function(){
            ctx.clearRect(0, 0, c.width, c.height);
            ctx.drawImage(img, 0, 0,307,382);

            img1.onload = function(){
                ctx.drawImage(img1,$xyframe[0][0],$xyframe[0][1],$xyframe[0][2],$xyframe[0][3]);
            };
            img2.onload = function(){
                ctx.drawImage(img2,$xyframe[1][0],$xyframe[1][1],$xyframe[1][2],$xyframe[1][3]);
            };
            img3.onload = function(){
                ctx.drawImage(img3,$xyframe[2][0],$xyframe[2][1],$xyframe[2][2],$xyframe[2][3]);
            };
            img4.onload = function(){
                ctx.drawImage(img4,$xyframe[3][0],$xyframe[3][1],$xyframe[3][2],$xyframe[3][3]);
            };
            img5.onload = function(){
                ctx.drawImage(img5,$xyframe[4][0],$xyframe[4][1],$xyframe[4][2],$xyframe[4][3]);
            };
            img6.onload = function(){
                ctx.drawImage(img6,$xyframe[5][0],$xyframe[5][1],$xyframe[5][2],$xyframe[5][3]);
            };
            img7.onload = function(){
                ctx.drawImage(img7,$xyframe[6][0],$xyframe[6][1],$xyframe[6][2],$xyframe[6][3]);
            };
            img8.onload = function(){
                ctx.drawImage(img8,$xyframe[7][0],$xyframe[7][1],$xyframe[7][2],$xyframe[7][3]);
            };
            img9.onload = function(){
                ctx.drawImage(img9,$xyframe[8][0],$xyframe[8][1],$xyframe[8][2],$xyframe[8][3]);
            };

        };
    });

並鏈接到測試腳本https://tajkjs-olszam.c9users.io/genform/

如果我從img1-9.onload中刪除，請離開ctx.drawimage（img1-9）並使settimeout從3到5秒，那么還可以，但是我希望沒有settimeout。

setTimeout(function(){

               //img.onload = function(){
                ctx.drawImage(img, 0, 0,307,382);
           // };

                ctx.drawImage(img1,$xyframe[0][0],$xyframe[0][1],$xyframe[0][2],$xyframe[0][3]);



                ctx.drawImage(img2,$xyframe[1][0],$xyframe[1][1],$xyframe[1][2],$xyframe[1][3]);


                ctx.drawImage(img3,$xyframe[2][0],$xyframe[2][1],$xyframe[2][2],$xyframe[2][3]);


                ctx.drawImage(img4,$xyframe[3][0],$xyframe[3][1],$xyframe[3][2],$xyframe[3][3]);


                ctx.drawImage(img5,$xyframe[4][0],$xyframe[4][1],$xyframe[4][2],$xyframe[4][3]);


                ctx.drawImage(img6,$xyframe[5][0],$xyframe[5][1],$xyframe[5][2],$xyframe[5][3]);


                ctx.drawImage(img7,$xyframe[6][0],$xyframe[6][1],$xyframe[6][2],$xyframe[6][3]);


                ctx.drawImage(img8,$xyframe[7][0],$xyframe[7][1],$xyframe[7][2],$xyframe[7][3]);


                ctx.drawImage(img9,$xyframe[8][0],$xyframe[8][1],$xyframe[8][2],$xyframe[8][3]);
            },100);

這段代碼是可行的，但不幸的是我已經使用了settimeout

Answer 1

盡量不要在每次加載圖像時進行繪制。 使用計數器加載圖像，並在最后一次加載時運行繪圖功能。 Pablo也說對了-在設置源之前設置onload監聽器。 此代碼應在您的點擊監聽器函數中運行

 var img; var counter = 0; var imagesLength = 9; var images = []; var backgroundImage = new Image(); var imgFolder = location.href+'/img/mercmain/'; function drawImages(){ ctx.clearRect(0, 0, c.width, c.height); ctx.drawImage(backgroundImage, 0, 0,307,382); //draw background for ( var i=0; i<imagesLength ; i++ ){ //draw images ctx.drawImage(images[i],$xyframe[i][0],$xyframe[i][1],$xyframe[i][2],$xyframe[i][3]); } } function onLoad(){ counter++; if( counter === imagesLength + 1 ){ // +1 - we must count also background image drawImages(); // draw all the images at once } } for ( var i=0; i<imagesLength ; i++ ){ img = new Image(); images.push( img ); // push in array before src, // onload should not fire while image is not in array img.onload = onLoad; // set onload before src, // image should not load before onload listener is set img.src = imgFolder + $('#merc'+ (i+1) +' option:selected').val(); } // do not forget to set the same for background image backgroundImage.onload = onLoad; backgroundImage.src = location.href + '/img/frames/' + $('#frames option:selected').val(); 

Answer 2

您有一個競爭條件：您要同時加載所有圖像，但是如果背景圖像不是要加載的第一個圖像，則在圖像加載后添加onload偵聽器，因此該事件已經發生並且繪圖邏輯從不執行。

解？ imgN.onload=function() {...}分配應該在img.onload函數之外：

$('button').on('click',function(){

    var img = new Image();
    var imgArr=[];
    for (var i=0;i<9;i++) {
        imgArr[i]=new Image();
    }

    img.src = $(location).attr('href')+'/img/frames/'+$('#frames option:selected').val();
    for (var i=0;i<9;i++) {
        imgArr[i].src=$(location).attr('href')+'/img/mercmain/'+$('#merc'+i+' option:selected').val();
    }
    img.onload = function(){
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.drawImage(img, 0, 0,307,382);
    }
    //Here, instead in the previous function
    for (var i=0;i<9;i++) {
        imgArr[i].onload = function(){
            ctx.drawImage(img1,$xyframe[i][0],$xyframe[i][1],$xyframe[i][2],$xyframe[i][3]);
        };
    }
});