javascript - Canvas 未绘制 html5(javascript，闭包)

Question

如果我删除“alert(stepHor);”线，我的 Canvas 上不会画任何东西。但如果我发出警报(stepHor)，一切都会按预期顺利进行。如果它有一个类似这样的 img.onload ，我会理解，但在这里我不明白。这和“封城”有关系吗？提前致谢。

function draw(imageData) {  
    var canvas=document.getElementById('bg'); 
    if(canvas.getContext){ 
        var ctx=canvas.getContext('2d');
        ctx.scale(0.4,0.4);

        var stepHor=Math.floor(imageData.width/imax);
        var stepVer=Math.floor(imageData.height/jmax);
        alert(stepHor);

        for(i=0;i<=imax;i++){
            for(j=0;j<=jmax;j++){   
                var index=(j*stepVer+Math.floor((imageData.height-jmax*stepVer)/2))*(4*imageData.width)+(i*stepHor*4)+Math.floor((imageData.width-imax*stepHor)/2)*4;//the first 'Math.floor' member is to center the image vertically, the second 'Math.floor' member is to center the image horizontally
                var red=imageData.data[index];
                var green=imageData.data[index+1];
                var blue=imageData.data[index+2];
                var alpha=imageData.data[index+3];
                ctx.fillStyle='rgb(' +red+ ',' +green+ ',' +blue+ ')';
                ctx.fillRect(wireWidth*i,wireHeight*j,wireWidth,wireHeight);
            }
        }

    }
}

Answer 1

在 Canvas 上绘图之前，您需要等待页面初始化。

在body.onload中调用函数或某种方式。

阻止警报可以为浏览器提供足够的时间来初始化，除非您是 react 速度为 10 毫秒的机器人:-D