Question

我有一张id为cnv的画布。

<canvas id='cnv'></canvas>

我有一个javascript函数可以更改画布中的图像。图像各不相同。

function changeImageInACanvas(dynamicSource){     
     var myid_signature = document.getElementById("cnv");    
     var myid_ctx_signature= myid_signature.getContext('2d');
     var myid_signature_image  = document.getElementById("img_mysignature");                                                
     myid_signature_image.src = dynamicSource;                    

     myid_ctx_signature.clearRect(0, 0, myid_signature.width, myid_signature.height);               

     if (myid_signature_image.complete){
         myid_ctx_signature.drawImage(myid_signature_image,0,0,  myid_signature_image.width,  myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);                                                                                                
     }else{
         myid_signature_image.onload = function () {                            
             myid_ctx_signature.drawImage( myid_signature_image,0,0,  myid_signature_image.width,  myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);                                                                                                   
         };                                              
     }
}

第一次执行该功能时，图像在画布中正确加载，但第二次显示上一张图像，并且未显示新图像。

我通过在函数的每一行中放置一个断点来调试它。我发现新图像是在第二次执行函数时加载的，但在该函数之后，画布再次加载上一个/第一个图像。我在哪里错过了？

Answer 1

您需要从

更改图像变量的声明

var myid_signature_image  = document.getElementById("img_mysignature");

要

var myid_signature_image  = new Image();

然后您就可以按预期使用该功能。

此Jsfiddle

中的快速示例

更新回答： 在声明图像源之后，有时会激活onload-event。而是在之前宣布它。

function changeImageInACanvas(dynamicSource){     
     var myid_signature = document.getElementById("cnv");    
     var myid_ctx_signature= myid_signature.getContext('2d');
     var myid_signature_image  = new Image();  
  
     myid_signature_image.onload = function () { //declare the onload-event                      
        myid_ctx_signature.clearRect(0, 0, myid_signature.width, myid_signature.height); 
       myid_ctx_signature.drawImage( myid_signature_image,0,0,  myid_signature_image.width,  myid_signature_image.height, 0, 0, myid_signature.width, myid_signature.height);
                      
     }
     myid_signature_image.src = dynamicSource; //declare the source last
}


changeImageInACanvas('http://pattersonrivervet.com.au/sites/default/files/pictures/Puppy-10-icon.png');      

setTimeout(function () {
 changeImageInACanvas('https://38.media.tumblr.com/avatar_2be52b9ba912_128.png');  
},3000);

<canvas id='cnv'></canvas>

画布加载上一张图片

1 个答案: