Question

我通过调用setInterval(draw,interval)来动画HTML画布和javascript。间隔设置为10（我认为是10密耳，但我不确定！）这里是绘制方法：

function draw()
{
    clear();
    for(var i=0;i<nodes.length;i++){
        for(var j=0;j<nodes[i].length;j++){
            drawNode(nodes[i][j]);
        }
    }
}

function clear(){
    context.clearRect(0,0,WIDTH,HEIGHT);
}

function drawNode(node){
     var x=node.getX();
     var y=node.getY();
     ctx.lineWidth=5;
     ctx.strokeStyle='black';
     ctx.strokeRect(x,y,nodeWidth,nodeHeight);
     if(node.isSource()&&sinkNotFound) ctx.fillStyle='yellow';
     else if(node.isSource()&&!sinkNotFound) ctx.fillStyle='orange';
     else if(!node.isTraversable()) ctx.fillStyle='black';
     else if (node.isOpen()) ctx.fillStyle='green';
     else if(node.isDiscovered()) ctx.fillStyle='red';
     else ctx.fillStyle='white';
     ctx.fillRect(x+ctx.lineWidth,y+ctx.lineWidth,
                  nodeWidth-2*ctx.lineWidth,nodeHeight-2*ctx.lineWidth);
}

我还有一个按钮，按钮的onclick定义为askForSource()。这是方法：

function askForSource(){
    var goodInput = false;
    while (!goodInput) {
        if (state == 0) {
            var x = prompt("Source x: ", "x gride squares from the left");
            var y = prompt("Source y: ", "y gride squares from top");
            if (nodes[y][x].isTraversable()) {
                console.log('good source');
                state = 1;
                nodes[y][x].makeSource();
            }
            else alert('Invalid source');
        }
    }
}

在单击按钮之前，draw方法每10个调用一次。但是如果我点击按钮，那么在我将信息输入两个提示框之后，不会再调用draw方法。我不确定如何确保在给出正确的输入后继续调用draw方法。需要说明的是，draw方法不依赖于state变量。 state变量仅用于允许用户单击setSource按钮，我只想在每次使用时允许一次。

感谢您提供的任何帮助！

JavaScript无法在提示后绘制

0 个答案: