Javascript 单击时更改圆弧的颜色

这是我写的一段代码，在其中我在一个圆内画了两条不同的弧。到目前为止，当在圆内单击时，两个圆弧同时改变颜色

我找不到一种方法来改变被点击的特定弧的颜色

代码

函数设置（）{
createCanvas（500500）；
r=随机（255）；
g=随机（255）；
b=随机（255）；
}
函数绘图（）{
背景（255）；
冲程（0）；
冲程重量（10）；
填充（r、g、b、127）；
弧（200200200200200，半π，π*1.75）；
冲程（0）；
冲程重量（10）；
填充物（r-200、g-20、b-55、200）；
弧（2002002002002005.50，半π）；
填充（255）；
椭圆（200200150150）；
}
函数mousePressed（）{
设d=dist（mouseX，mouseY，200200）；
如果（d<100）{
//拾取新的随机颜色值
r=随机（255）；
g=随机（255）；
b=随机（255）；
}
}

---

您需要两种颜色。我建议使用：

让color1、color2；
函数设置（）{
createCanvas（500500）；
颜色1=颜色（随机（255）、随机（255）、随机（255）、127）；
颜色2=颜色（随机（255）、随机（255）、随机（255）、200）；
}
函数绘图（）{
// [...]
填充（颜色1）；
弧（200200200200200，星形，端角）；
// [...]
填充（颜色2）；
弧（200200200200200，端角，星形缠结）；
}

定义开始角度和结束角度：

让startAngle=Math.PI/2；
设endAngle=Math.PI*1.75；

计算从圆弧中心到鼠标的矢量角度：

let angle=Math.atan2（mouseY-200，mouseX-200）；
如果（角度<0）角度+=数学PI*2；

相应地更改其中一种颜色：

if（d<100&&d>75）{
如果（角度>起始角和角度<结束角）{
颜色1=颜色（随机（255）、随机（255）、随机（255）、127）；
}否则{
颜色2=颜色（随机（255）、随机（255）、随机（255）、127）；
}
}

让color1、color2；
让startAngle=Math.PI/2；
设endAngle=Math.PI*1.75；
函数设置（）{
createCanvas（500500）；
颜色1=颜色（随机（255）、随机（255）、随机（255）、127）；
颜色2=颜色（随机（255）、随机（255）、随机（255）、200）；
}
函数绘图（）{
背景（255）；
冲程（0）；
冲程重量（10）；
填充（颜色1）；
弧（200200200200200，星形，端角）；
冲程（0）；
冲程重量（10）；
填充（颜色2）；
弧（200200200200200，端角，星形缠结）；
填充（255）；
椭圆（200200150150）；
}
函数mousePressed（）{
设d=dist（mouseX，mouseY，200200）；
让角度=Math.atan2（mouseY-200，mouseX-200）；
如果（角度<0）角度+=数学PI*2；
如果（d<100&&d>75）{
如果（角度>起始角和角度<结束角）{
颜色1=颜色（随机（255）、随机（255）、随机（255）、127）；
}否则{
颜色2=颜色（随机（255）、随机（255）、随机（255）、127）；
}
}
}