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>