如何为画布加载屏幕

Question

我正在使用javascript canvas元素，我正在寻找可以为它制作加载屏幕的方法，因为它需要在屏幕上布置20万个单独的彩色点，这需要相当长的一段时间。我看到的所有加载屏幕内容都是用于HTML元素加载的jQuery解决方案。但是，canvas标签加载速度很快，但其上的元素却没有。有没有办法衡量画布加载的进度？

由于

Answer 1

您可以创建一个具有绝对位置的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()

Answer 2

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上下文函数本身是同步的。