Question

我正在尝试创建自己的基本排序算法可视化程序。尝试在数组中交换两个数字时遇到问题。作为该过程的一部分，我需要交换功能来交换图形上的视线。

我已经用Python编写了这个文件，并且试图用javascript重写它。这是它的gif效果，可以在Python中正常工作：https://i.imgur.com/IVWuZ2o.gifv

我的问题是，当我想交换两个值时，原始行不会被清除，而是被新行覆盖。尝试改组数组后，最终结果如下：

The array was initially sorted least to greatest, then shuffled

代码如下：

function eraseLine(a, i) {
    ctx.clearRect(i * lineWidth, height - a[i], lineWidth, a[i]);
}

function swap(a, i, j) {
    // clear the lines already there
    lineWidth = width / a.length;
    ctx.lineWidth = lineWidth;

    eraseLine(a, i);
    eraseLine(a, j);

    // actually swap the values
    var temp = a[i];
    a[i] = a[j];
    a[j] = temp;

    // redraw the new lines
    ctx.strokeStyle = "#FFFFFF";
    ctx.moveTo(i * lineWidth + lineWidth / 2, height);
    ctx.lineTo(i * lineWidth + lineWidth / 2, height - a[i]);
    ctx.stroke();

    ctx.moveTo(j * lineWidth + lineWidth / 2, height);
    ctx.lineTo(j * lineWidth + lineWidth / 2, height - a[j]);
    ctx.stroke();
}

async function eraseLines(a, start, end) {
    for(var i = start; i < end; i++) {
        eraseLine(a, i);
        await sleep(50);
    }
}

async function shuffle(a) {
    for(var i = a.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        swap(a, i, j);
        await sleep(50);
    }
}

Answer 1

我通过在开始画线和ctx.closePath（）之前添加ctx.beginPath（）来修复它。我以为stroke（）可以帮我解决这个问题。

Javascript-尝试擦除和重画画布上其他位置的行不起作用

1 个答案: