Canvas Loads Previous Image

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事件有时被激活所述图像源已声明本之后。取而代之的是宣布它。

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>