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!');，所以很自然你会在屏幕更新之前获得警报框，你会看到noize。

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

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

请参阅此JSFiddle result作为示例。

希望这有帮助。

如何确定画布何时完成加载

2 个答案: