畫布更新與緩衝區drawImage不應用與drawImage行動

Question

我使用緩衝方法來更新畫布，事情是當我在我的緩衝區畫布中繪製圖像，並將其應用於真正的畫布有沒有圖像在真正的畫布。但我可以將其他任何東西應用到真正的畫布上。

這是我的代碼：

var ctx = $('#canvas')[0].getContext("2d"), 
    width = $("#canvas").width(), 
    height = $("#canvas").height(), 
    buffer = $("<canvas>")[0].getContext("2d"); 
ctx.canvas.width = width; 
ctx.canvas.height = height; 
buffer.canvas.width = width; 
buffer.canvas.height = height; 
var image = new Image(); 
image.src = "img/logo.png"; 
$(image).load(function() { 
    buffer.drawImage(image, 0, 0); 
}); 
ctx.drawImage(buffer.canvas, 0, 0); 

Answer 1

它不工作，因爲這些事件存在的：

1. 你正在繪製一個空的緩衝區到你的正常的畫布。
2. 然後圖像加載完成。
3. 然後將圖像繪製在緩衝區上。您現在有緩衝區圖像，但永遠不會繪製到常規畫布上。

如果你把ctx.drawImage線在onload裏面：

$(image).load(function() { 
    buffer.drawImage(image, 0, 0); 
    ctx.drawImage(buffer.canvas, 0, 0); 
}); 

它的工作就像你想要的。