如何確定畫布何時完成加載

Question

因此，我正在制作一個較大的畫布，其中填充了1x1像素，我想為其制作一個加載屏幕。 填充畫布的循環完成后的問題是，它警告已完成加載，但是畫布實際上並未更改。 我在這里做了一個jsfiddle來演示。 我實際上如何確定何時使用javascript或jQuery實際加載了畫布，以及是什么導致了這種現象？

var ctx=document.getElementById('canvas').getContext('2d');
for(var x=1;x<600;x++){
    for(var y=1;y<600;y++){
        var color= '#' + Math.floor (Math.random() * 16777215).toString(16);
        ctx.fillStyle=color;
        ctx.fillRect(x,y,1,1);
    }
}
alert('done!');

Answer 1

既然您說jquery還可以，那么在循環完成循環后就觸發一個自定義事件。

需要畫布完全加載的任何代碼都可以進入事件處理程序。

// Listen for custom CanvasOnLoad event
$(document).on( "CanvasOnLoad", canvasOnLoadHandler ); 

var ctx=document.getElementById('canvas').getContext('2d');

for(var x=1;x<600;x++){
    for(var y=1;y<600;y++){
        var color= '#' + Math.floor (Math.random() * 16777215).toString(16);
        ctx.fillStyle=color;
        ctx.fillRect(x,y,1,1);
    }

    // fire CanvasOnLoad when the looping is done
    if(x>=599){
        $.event.trigger({
          type: "CanvasOnLoad"
          });
    }

}
console.log("...follows the for loops.");

// handle CanvasOnLoad knowing your canvas has fully drawn
function canvasOnLoadHandler(){
    console.log("canvas is loaded");
}

Answer 2

就像加載進度動畫一樣。 通常無法立即從正在運行的功能更新/前進該動畫（該功能完成后屏幕更新）。

您的畫布代碼是（自動）包裝在onload函數中的： window.onload=function(){ /*your code here*/ }; 。
該函數的最后一行是alert('done!'); ，因此您自然會在屏幕更新之前收到警報框，並看到提示。

一種解決方案是首先設置並顯示一個加載圖像，然后使用setTimeOut （例如30ms）渲染畫布，並以另一個setTimeOut結束該畫布功能，以再次刪除加載圖像。

注意：您可能知道，您的代碼將生成（很多）十六進制顏色，例如#3df5和#5d8a6 ，這兩種顏色都不是有效的顏色！ 另外，您使用了16777215，但是Math.random（）需要乘以16777216。要解決此問題，您可以嘗試：
color='#'+((Math.random()+1)*16777216|0).toString(16).substr(1);
這是一些有關隨機顏色的好讀物。

請參見此JSFiddle 結果作為示例。

希望這可以幫助。