画布没有被绘制html5(javascript,closures)

时间:2012-03-02 12:04:23

标签: javascript html5 canvas closures

如果我删除“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);
            }
        }

    }
}

1 个答案:

答案 0 :(得分:2)

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

body.onload或稍微调用函数。

阻止警报为浏览器提供足够的初始化时间,除非你是一个反应速度为10毫秒的机器人:-D