在畫布上，帶有png的drawImage與使用筆觸創建圖形之間的區別？

Question

為什么在畫布中處理事物之間有區別？ 例如，如果我在畫布上放置png而不是在畫布上畫一條線。 當我將該畫布的內容復制到另一個畫布時，僅一行被復制。

var thecanvas = document.getElementById('mycanvas');
var context = thecanvas.getContext('2d');

// put a png on the canvas
var img = new Image();
img.onload = function(){ context.drawImage(img,0,0); };
img.src = 'images/test.png';        

// draw a line on the canvas
context.moveTo(100, 150); context.lineTo(450, 50); context.stroke();

final_image = thecanvas.toDataURL("image/png");
copyimg = new Image();
copyimg.src = final_image;          
var newcanvas = document.getElementById('newCanvas');
var newcanvascontext = newcanvas.getContext('2d');

// why is only the line I drew copied over and not the png image???
newcanvascontext.drawImage(copyimg,0,0,397,397);

Answer 1

請注意圖像加載事件。 在加載圖像之前復制畫布。 你必須這樣

var thecanvas = document.getElementById('mycanvas');
var context = thecanvas.getContext('2d');

// put a png on the canvas
var img = new Image();
img.onload = function(){ 

        context.drawImage(img,0,0); 

        var newcanvas = document.getElementById('newCanvas');
        var newcanvascontext = newcanvas.getContext('2d');
        newcanvascontext.drawImage(thecanvas,0 ,0);

};
img.src = 'http://www.mygreatiphone.com/wp-content/uploads/2011/11/google.png';        

// draw a line on the canvas
context.moveTo(100, 150); context.lineTo(450, 50); context.stroke();

觀看演示： http : //jsfiddle.net/diode/3NHXy/5/