时间戳

首页 > 解决方案 > Javascript - 试图在画布上的其他地方擦除和重绘线条不起作用

javascript - Javascript - 试图在画布上的其他地方擦除和重绘线条不起作用

问题描述

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

我已经用 Python 编写了这个，我正在尝试用 javascript 重写它。这是它在 Python 中按预期工作的 gif：https ://i.imgur.com/IVWuZ2o.gifv

我的问题是，当我想交换两个值时，原始行没有被清除，而是用新行绘制。这是尝试洗牌后最终的样子：

数组最初按从小到大排序，然后打乱

这是代码：

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);
    }
}

标签： javascriptcanvaslinedraw

解决方案

我通过在开始画线和 ctx.closePath() 之前添加 ctx.beginPath() 来修复它。我认为 stroke() 会为我处理这个问题。

推荐阅读