爲什麼第一次加載失敗，但隨後的加載工作？

Question

這個問題最好用jsFiddle來演示。 Here is is.

所以，根據這個代碼：

var canvas = document.getElementById('canvas'); 
canvas.width = 200; 
canvas.height = 150; 
var context = canvas.getContext('2d'); 
context.rect(20,20,50,50); 
context.stroke(); 
var image = new Image(); 
image.src = canvas.toDataURL("image/png"); 
context.clearRect(0, 0, canvas.width, canvas.height); 
context.drawImage(image, 0, 0); 

你應該看到每一個加載頁面的時間繪製在畫布上的矩形。然而，由於某種原因，第一個頁面加載總是顯示什麼，一個「空白」 ......

這點可以通過在不同的瀏覽器「微服私訪」選項卡打開的jsfiddle鏈接來證明。你將不會第一次看到矩形負載。不過刷新會出現。

而只是爲了證明你確實應該會看到在初始加載一個矩形，嘗試更新的jsfiddle這樣：

var canvas = document.getElementById('canvas'); 
canvas.width = 200; 
canvas.height = 150; 
var context = canvas.getContext('2d'); 
context.rect(20,20,50,50); 
context.stroke(); 
//var image = new Image(); 
//image.src = canvas.toDataURL("image/png"); 
//context.clearRect(0, 0, canvas.width, canvas.height); 
//context.drawImage(image, 0, 0); 

，你會看到在每一第一負荷的矩形。

爲什麼先裝秀什麼？

Answer 1

你要等待圖像加載，然後才能板車它，因爲它緩存它適用於重載

image.onload = function(){ 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.drawImage(image, 0, 0); 
} 

http://jsfiddle.net/hJ9WQ/1/