4

所以我正在制作一个相当大的画布，其中填充了 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!');
4

2 回答 2

4

既然你说 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");
}
于 2013-05-05T18:09:01.630 回答
2

它就像一个加载进度动画。从正在运行的函数更新/推进该动画通常不会立即起作用（该函数完成时屏幕更新）。

您的画布代码（自动）包装在一个onload函数中：window.onload=function(){ /*your code here*/ };.
该函数的最后一行是alert('done!');，因此您自然会在屏幕更新之前获得警报框并看到噪音。

一种解决方案是首先设置并显示加载图像，然后使用setTimeOut（比如 30 毫秒）渲染画布，用另一个 setTimeOut 结束该画布函数以再次删除加载图像。

注意：您可能知道，您的代码会生成（很多）十六进制颜色，例如#3df5and #5d8a6，这两种颜色都不是有效颜色！您还使用了 16777215，但 Math.random() 需要乘以 16777216。要解决此问题，您可能想尝试：
color='#'+((Math.random()+1)*16777216|0).toString(16).substr(1);
这是一些关于随机颜色的好读物。

以这个 JSFiddle结果为例。

希望这可以帮助。

于 2013-05-05T13:09:09.233 回答