如何在p5.js中通过按键切换图形（椭圆转矩形）并修正代码问题

我来帮你搞定这个图形切换的功能！你的代码思路是对的，但有几个关键细节没处理好，导致初始图形和切换逻辑不生效，我来一步步给你修正：

问题分析 #

1. musculus的赋值错误：你在draw()里把ellipse(30, 30, 20, 20)赋值给musculus，但p5.js的绘图函数（比如ellipse）返回的是undefined，不是可调用的函数。而且draw()会每秒执行60次，这会把你在keyTyped里设置的flexor/extensor函数直接覆盖掉。
2. 缺少初始函数绑定：全局的musculus变量没有初始化为一个函数，导致第一次执行draw()时会出错。
3. 未清屏导致图形重叠：没有在draw()里调用background()，切换图形时旧的图形会留在画布上。

修正后的完整代码 #

// 全局声明musculus，初始绑定默认的图形函数
let musculus;

function setup() {
  createCanvas(200, 200); // 创建画布，方便查看效果
  // 初始设置为默认的小椭圆函数
  musculus = defaultMuscle;
}

function draw() {
  background(220); // 每次绘制前清屏，避免图形重叠
  musculus(); // 调用当前musculus指向的函数
}

function keyTyped() {
  if (key === 'a') {
    musculus = flexor; // 切换到flexor函数
  } else if (key === 'b') {
    musculus = extensor; // 切换到extensor函数
  }
}

// 默认初始图形：小椭圆
function defaultMuscle() {
  ellipse(30, 30, 20, 20);
}

function flexor() {
  ellipse(56, 46, 55, 55);
}

function extensor() {
  square(30, 20, 55, 20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

关键修改点说明 #

• 全局初始化musculus：把musculus放在全局作用域，在setup()里绑定初始的图形函数，避免draw()循环覆盖它。
• draw()里调用函数：不再给musculus赋值，而是调用它，这样每次绘制都会渲染当前选中的图形。
• 添加setup()和清屏：setup()是p5.js的初始化函数，用来创建画布；background(220)确保每次绘制都是干净的画布。
• 分离默认图形：把初始的小椭圆做成单独的defaultMuscle函数，逻辑更清晰，也方便你后续修改初始样式。

现在你按下a键就能切换到大椭圆，按下b键切换到圆角矩形，初始显示小椭圆，完全符合你的需求啦！

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