javascript - 如何为画布制作加载屏幕

Question

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

谢谢

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