理解 p5.js 绘图机制与挑战
在p5.js中，setup()函数负责初始化，例如创建画布，而draw()函数则是一个持续运行的循环，负责每一帧的渲染。当我们需要实现交互式绘图，特别是根据用户输入（如点击单选按钮）来切换显示内容时，一个常见的误区是在事件处理器（如onchange函数）中直接进行绘图。
初始问题分析： 如果我们在单选按钮的onchange事件处理器中直接调用circle()等绘图函数，而不清除画布，那么每次点击按钮时，新的图形会直接绘制在现有图形之上。p5.js的画布默认是透明的，除非明确使用background()函数来填充背景，否则之前的绘制内容会一直保留。这导致了“旧图形仍然存在”的问题，因为画布没有被刷新。
正确的做法是利用draw()循环的特性。draw()函数每秒会执行多次（通常是60次），这为我们提供了一个理想的场所来：
- 清除画布： 在draw()循环的开始处调用background()函数，可以确保每一帧都从一个干净的画布开始。
- 条件性绘制： 在清除背景后，根据当前应用程序的状态（例如哪个单选按钮被选中），决定绘制哪个图形。
通过这种方式，draw()循环会持续检查单选按钮的状态，并在每次循环开始时清除画布，然后只绘制当前应显示的图形，从而实现平滑的图形切换效果。
核心解决方案：利用 draw() 函数进行条件渲染
解决此问题的关键在于将绘图逻辑集中到p5.js的draw()函数中，并确保在每次绘制前清除画布。具体步骤如下：
- 获取 DOM 元素引用： 在p5.js脚本中获取对HTML单选按钮元素的引用。
- setup() 函数： 初始化画布。
-
draw() 函数：
- 在draw()函数的最开始调用background()来清除上一帧的所有内容。
- 通过检查单选按钮的checked属性来判断哪个按钮被选中。
- 根据判断结果，只绘制当前选中按钮对应的图形。
这种方法确保了每次屏幕更新时，画布都会被刷新，并且只会根据最新的用户选择显示一个图形。
逐步实现
下面我们将通过一个完整的示例来演示如何实现基于单选按钮的p5.js条件绘图。
1. HTML 结构
首先，我们需要创建包含p5.js库引用和两个单选按钮的HTML文件。请注意，这里我们移除了onchange属性，因为p5.js的draw()循环会直接监听DOM元素的状态。
p5.js 单选按钮交互式绘图
说明：
- p5.js 和 p5.sound.min.js 的引用是必需的。
- main 标签通常用于p5.js画布的容器。
- 两个 input type="radio" 元素共享相同的 name="radionbutton"，确保它们是互斥的。
- id="button1" 和 id="button2" 用于JavaScript获取DOM元素的引用。
- checked 属性可以预设一个默认选中的按钮。
2. CSS 样式 (style.css)
为了让画布更好地显示，我们可以添加一些基本的CSS样式。
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
canvas {
display: block; /* 移除画布下方的额外空间 */
margin-bottom: 20px; /* 让画布和按钮之间有间距 */
border: 1px solid #ccc;
}
label {
margin-left: 5px;
}3. JavaScript (p5.js) 逻辑 (sketch.js)
这是实现核心逻辑的部分。我们将在这里定义setup()和draw()函数。
// 全局变量用于存储单选按钮的DOM引用
var button1;
var button2;
function setup() {
// 创建一个400x400像素的画布
myCanvas = createCanvas(400, 400);
// 获取HTML中id为"button1"和"button2"的元素
button1 = document.getElementById("button1");
button2 = document.getElementById("button2");
}
function draw() {
// 每一帧都清除画布，填充为指定颜色 (例如：品红色)
background(218, 24, 132);
// 检查第一个单选按钮是否被选中
if (button1.checked) {
fill(255); // 填充白色
noStroke(); // 无边框
circle(200, 200, 200); // 在画布中央绘制一个大圆
}
// 检查第二个单选按钮是否被选中
if (button2.checked) {
fill(0, 200, 255); // 填充蓝色
noStroke(); // 无边框
circle(100, 100, 100); // 在画布中央绘制一个小圆
}
}说明：
- button1 和 button2 在全局作用域声明，并在 setup() 中获取其DOM引用，确保在 draw() 函数中使用时它们已经可用。
- setup() 函数只执行一次，用于初始化画布和获取DOM元素。
- draw() 函数是p5.js的核心循环。
- background(218, 24, 132);：这是关键一步，它在每一帧开始时用指定的品红色清除整个画布。
- if (button1.checked) 和 if (button2.checked)：这些条件语句会检查对应的单选按钮是否被选中。由于单选按钮的互斥性，同一时间只会有一个条件为真。
- circle()：根据选中的按钮，绘制相应大小和颜色的圆。
注意事项与最佳实践
- background() 的位置： 务必在 draw() 函数的开头调用 background()。如果将其放在条件语句内部，或者只在 setup() 中调用，将无法实现清除旧图形的效果。
- 绘图逻辑集中化： 尽量将所有动态绘图逻辑都放在 draw() 函数中。这样可以更好地利用p5.js的循环机制，确保动画和交互的流畅性。
- 避免在事件处理器中直接绘图： 虽然可以在 onchange 事件中调用 redraw() 来强制 draw() 循环执行一次，但对于需要持续更新的场景，直接在 draw() 中检查状态更为简洁和高效。在本例中，由于 draw() 默认是循环执行的，因此甚至不需要 onchange 事件来触发重绘。
- DOM 元素与 p5.js 画布的交互： p5.js主要操作其创建的
总结
通过本教程，我们学习了如何在p5.js中利用draw()循环和background()函数，结合HTML单选按钮，实现交互式图形的条件显示与切换。核心思想是在每一帧渲染前清除画布，然后根据用户界面的状态重新绘制所需图形。这种模式是p5.js中处理动态和交互式视觉效果的常用且高效的方法，能够确保用户体验的清晰性和流畅性。掌握这一技术，将有助于您创建更复杂、响应更灵敏的p5.js应用程序。
