使用JavaScript和HTML5画布显示绘图过程

我目前正在尝试使用JavaScript/JQuery和HTML5画布制作一个小型毕达哥拉斯树应用程序

该算法运行良好，但遗憾的是，我无法看到绘图过程。完成后，UI将冻结并显示整个图形

当前行为： 这是我想要的行为：（您需要允许Java小程序并单击几次以查看绘图进度）

$（document）.ready（function（）{//只有一些侦听器和初始化
initCanvas（）；
$（自动选择）。更改（函数（）{
if（$（this.val（）==1））//从手动更改为自动
{
$（毕达哥拉斯）。单击（）；
}
});
$（开始按钮）。单击（函数（事件）{
$（此）.unbind（事件）；
$（this.html（'addleaves'）；
$（restartButton）.css（“可见性”、“可见”）；
startTree（）；
$（此）。单击（函数（）{
var next=parseInt（$（depthInput.val（））+1；
$（depthInput）.val（下一个）；
$（毕达哥拉斯）。单击（）；
});
});
$（重新启动按钮）。单击（函数（）{
startTree（）；
});
});
函数initCanvas（）//调整大小，清除画布并绘制边界
{
var canvas=document.getElementById（“pythagorasCanvas”）；
帆布。高度=600；
canvas.width=$（mainDiv.width（）-40；
$（毕达哥拉斯）。解除绑定（“单击”）；
if（canvas.getContext）
{
var context=canvas.getContext（“2d”）；
//透明帆布
drawRectangle（上下文，新点（0，canvas.height），新点（canvas.width，canvas.height），新点（canvas.width，0），新点（0,0），“#ffffffff”）；
//为画布绘制边框
drawRectangle（上下文，新点（0，canvas.height），新点（canvas.width，canvas.height），新点（canvas.width，0），新点（0,0），“#000000”，true）；
}
}
函数startTree（）//开始绘图过程
{   
initCanvas（）；
var canvas=document.getElementById（“pythagorasCanvas”）；
if（canvas.getContext）
{
var context=canvas.getContext（“2d”）；
var rectLength=parseInt（$（firstSquareInput）.val（））；
var startWidth=canvas.width/2-rectLength/2；
var startHeight=canvas.height-canvas.height/4；
var startA=新点（起始宽度，起始宽度）；
var startB=新点（startWidth+rectLength，startHeight）；
drawBranch（上下文，startA，startB，0）；
}
}
功能点（x，y）{
这个.x=x；
这个。y=y；
}
函数drawBranch（context，a，b，depth）//递归调用
{
var maxDepth=$（depthInput）.val（）；
如果（depth，我认为使用setTimeout对drawBranch函数进行以下（未测试）修改应该可以

if(autOrMan==1)
{
    //draw new positions
    setTimeout(function() {
        drawBranch(context, d, e, depth);
        drawBranch(context, e ,c, depth);       
    }, 0);
}
else
{
    $(pythagorasCanvas).click(function(event) 
    {
        $(this).unbind(event);
        drawBranch(context, d, e, depth);
        drawBranch(context, e ,c, depth);     
    });
}

它冻结是因为。与其递归调用
drawBranch
，不如通过
setTimeout
递归调度它，然后退出该函数。这将给浏览器时间重新绘制画布。
顺便说一句，你的回答速度非常快。我很惊讶。再次感谢：）
if(autOrMan==1)
{
    //draw new positions
    setTimeout(function() {
        drawBranch(context, d, e, depth);
        drawBranch(context, e ,c, depth);       
    }, 0);
}
else
{
    $(pythagorasCanvas).click(function(event) 
    {
        $(this).unbind(event);
        drawBranch(context, d, e, depth);
        drawBranch(context, e ,c, depth);     
    });
}