通过p5重新绘制画布，删除旧画布

Question

我想可视化我的排序算法，并每次重新绘制创建的画布。我的旧画布保留所有旧的值。它只是创建了一个新的画布，并把它放在旧画布的上面。但我想重新画一下就能解出来。我还尝试通过canvas.remove()删除画布并创建一个全新的画布，它也没有成功。

My setup call:

let canvas;
function setup() {
values = new Array(20);
this.canvas = createCanvas(values.length*w, 640);
createArray(values.length);
var slider = document.getElementById("slider");
slider.oninput = function() {
this.canvas = resizeCanvas(values.length*w, 640);
length = this.value;
createArray(length);
redraw();
}
var button = document.getElementById("btn");
button.onclick = function(){ 
quickSort(values, 0, values.length - 1);
}

}

和我的draw调用:

function draw() {
background(0);
for (let i = 0; i < values.length; i++) {
noStroke();
if (states[i] == 0) {
fill('#E0777D');
} else if (states[i] == 1) {
fill('#D6FFB7');
} else {
fill(255);
}
rect(i * w, height - values[i], w, values[i]);
}
}

谢谢你的帮助:)。

Answer 1

尝试在使用完画布后设置canvas=null