如何爲畫布加載屏幕

Question

我正在使用javascript畫布元素，並且正在尋找可以爲其加載屏幕的方法，因爲它需要佈置二十萬個單獨的彩色點屏幕，這需要相當長的一段時間。我看到的所有加載屏幕事件都是用於加載HTML元素的jQuery解決方案。但是，canvas標籤加載速度很快，但其上的元素卻沒有。有什麼方法可以評估畫布加載的進度嗎？

謝謝

Answer 1

var myContext = myCanvasElement.getContext('2d'), 
myImg = new Image(); 
var img=document.getElementById("scream"); 

myImg.onload = function() { 
    myContext.drawImage(img, 300, 300); 
    //... 
    //... 
    //your "on-finished" Call Here 
}; 

canva上下文功能是同步的自己。

Answer 2

您可以創建一個具有絕對位置的div，然後將其放置在畫布上。

//Init Canvas... get context 
//blah blah blah 

//Put a load screen over it 
var loading=$('<div style="position:absolute;left:;top:;background:url(\'loading.gif\' white"/>').appendTo("body"); 

//Call drawing procedure 
//...... 

//when done just remove 
loading.remove()