通过 p5 重绘 Canvas 并删除旧的 canvas

Question

我想可视化我的排序算法并每次重绘创建的 Canvas。我的旧 Canvas 保留所有旧值。它只是创建一个新的 Canvas 并将其放在旧的 Canvas 之上。但我认为通过重绘我可以解决它。我还尝试通过 canvas.remove() 删除 canvas 并创建一个全新的，但也没有成功。

我的设置调用：

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

我的抽奖电话：

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

后，尝试执行 canvas=null

通过 p5 重绘 Canvas 并删除旧的 canvas

Redraw Canvas via p5 with deleting the old canvas

javascript

p5.js