如何让p5.js中路径、交通灯两组内容同时显示在同一canvas上

问题原因 #

• p5.js中全局只能有一个draw()函数，重复定义时后定义的函数会覆盖之前的，因此你写的路径小车渲染逻辑被后定义的交通灯渲染逻辑覆盖，不会执行
• 原有代码的setup()函数缺少闭合花括号，存在语法错误
• path变量仅声明未初始化，直接调用path.display()会触发运行时报错

修复方法 #

将两个draw()的逻辑合并到同一个函数中，补全语法错误，补充path的初始化逻辑即可，修改后的完整代码示例如下：

let vehicle;
let path;
// 交通灯全局变量
var redLight = 'red'
var yellowLight = 'white'
var greenLight = 'white'
var count = 0;

function setup() {
  createCanvas(600, 600);
  vehicle = new Vehicle(50, 0);
  // 此处替换为你自己的Path实例化逻辑即可
  path = new Path();
}

function draw() {
  background(220);
  // 路径小车渲染逻辑
  path.display();
  vehicle.follow(path);
  vehicle.update();
  vehicle.display();

  // 交通灯渲染逻辑
  fill("black")
  rect(140, 70, 110, 250)
  fill(redLight)
  ellipse(195, 120, 60, 60)
  fill("white")
  text("RED", 182, 124)
  fill(yellowLight)
  ellipse(195, 200, 60, 60)
  fill("white")
  text("YELLOW", 171, 205)
  fill(greenLight)
  ellipse(195, 280, 60, 60)
  fill("white")
  text("GREEN", 175, 285)
}

注：请确保你已经实现了Vehicle和Path类的完整定义，否则运行时会报类未定义的错误。

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