如何实现点击单选按钮时仅显示对应p5.js绘图？

我创建了一个p5.js绘图程序，预期点击单选按钮可切换绘图内容。点击第一个单选按钮时功能正常，但点击第二个时，之前的绘图仍未消失。请问如何实现点击单选按钮时仅显示当前对应的绘图？

现有代码 #

HTML #

<input type="radio" name="radionbutton" value="one" id="button1" onchange="checkM()"/>
<input type="radio" name="radionbutton" value="two" id="button" onchange="checkS()"/>

JavaScript #

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");

function drawDonut() {
  console.log("Redrawing our donut!");
  background(218, 24, 132);
}

function checkS(){
  document.getElementById("button").checked;
  circle(200,200,200);
}

function checkM(){
  document.getElementById("button1").checked;
  circle(100,100,100);
}

function setup() {
  myCanvas = createCanvas(400, 400);
  drawDonut();
}

解决方案 #

问题核心是p5.js的绘图操作会叠加在画布原有内容上，切换时未清空画布。另外代码还有两处小问题：第二个单选按钮ID是button，但JS里尝试获取button2，ID不匹配；checkS()和checkM()里的checked判断没有实际作用。

快速修复方案 #

修改代码，确保每次绘制新图形前调用background()清空画布，同时修正单选按钮ID匹配问题：

修正后的HTML

<input type="radio" name="radionbutton" value="one" id="button1" onchange="checkM()"/>
<input type="radio" name="radionbutton" value="two" id="button2" onchange="checkS()"/>

修正后的JavaScript

function clearCanvas() {
  background(218, 24, 132);
}

function checkS(){
  clearCanvas();
  circle(200,200,200);
}

function checkM(){
  clearCanvas();
  circle(100,100,100);
}

function setup() {
  createCanvas(400, 400);
  clearCanvas();
}

更符合p5.js规范的方案 #

推荐利用p5.js的draw()循环，通过状态变量控制绘制内容，代码更易维护：

let currentShape = null;

function setup() {
  createCanvas(400, 400);
  background(218, 24, 132);
  
  // 绑定单选按钮事件
  document.getElementById("button1").addEventListener('change', () => {
    currentShape = 'smallCircle';
  });
  document.getElementById("button2").addEventListener('change', () => {
    currentShape = 'bigCircle';
  });
}

function draw() {
  if (currentShape) {
    background(218, 24, 132);
    switch(currentShape) {
      case 'smallCircle':
        circle(100, 100, 100);
        break;
      case 'bigCircle':
        circle(200, 200, 200);
        break;
    }
  }
}

内容的提问来源于stack exchange，提问作者haydenb