没有绘制 html5 的画布（javascript，闭包）

Question

如果我删除“alert(stepHor);”线，我的画布上不会画任何东西。但是如果我让警报（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

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

在body.onload 或其他地方调用函数。

阻止警报让浏览器有足够的时间来初始化，除非你是一个反应速度为 10 毫秒的机器人：-D