Javascript画布绿色椭圆左侧和红色右侧

我想在左边画绿色的椭圆，在右边画红色的椭圆。我使用随机函数来填充画布。为了我的目的，我使用if语句。也许开关箱更适合这个任务？ 这个语法只生成粉红点，有什么不对

var spotPos={
x:300，
y:200
}
变量spotCol={
r:0，
g:0，
b:0
}
函数设置（）{
createCanvas（600400）；
背景（0）；
}
函数绘图（）{
spotPos.x=随机（0，宽度）；
spotPos.y=随机（0，高度）；
//spotCol.r=随机（60255）；
noStroke（）
填充（点柱r、点柱g、点柱b）
椭圆（点位x、点位y、25、25）；
如果（点位置x<300）{
spotCol.b=255；
}否则，如果（spotPos.x>300）{
spotCol.r=255；
}
}

---

有几件事妨碍你达到你想要的结果

首先绘制椭圆，然后选择颜色。这意味着在下一轮的

draw

循环中，椭圆将在其他地方绘制，但颜色仍将基于上一个位置

第二个问题是RGB值的分配：

  if(spotPos.x < 300) {
    spotCol.b = 255;
  } else if(spotPos.x > 300) {
    spotCol.r = 255;
  }

---

如果在着色之前先画圆，它将检测不到新颜色。

用代码片段发布完整示例。请指定您使用的库。是p5.js吗？之前的评论者提出了有效的观点。我已经建议对问题进行编辑，以反映您正在使用

p5.js

，并将代码转换为代码片段。对于未来的问题，请记住这些评论，也可以看看这里：