Javascript 在画布动画中通过变量传递颜色

我试图在画布上制作一个可定制的动画

我试图通过传递不同的rgb值，通过单击按钮来更改动画的颜色

目前，我没有得到任何回应，点击按钮

html

有什么建议可以让它工作吗？//为什么现在不工作

---

非常感谢

您正在通过函数

changedotColor（）

更改局部变量

dotcolor\u val

，但是，该变量的值更改没有反映在

圆圈

实例中

这是指向工作代码的链接：

解释 在您的代码中，您正在定义一个对象

圆

，该对象带有

函数圆（args）

，并带有一些属性

您正在实例化，并使用以下代码将这些圆对象推到3个列表中：

for (i = 1; i < 10; i++) {
  var offset = 1;
  rowOne.push(new Circle({
    angle: 0,
    offset: i
  }));
  rowTwo.push(new Circle({
    angle: 120,
    offset: i
  }));
  rowThree.push(new Circle({
    angle: 240,
    offset: i
  }));
}

当您触发函数

changedotColor（）

时，您需要迭代3个列表及其子列表，并触发

changeColor

函数，如下所示：

Circle.prototype.changeColor = function( rgbcolor ) {
    this.color = rgbcolor;
}

function changedotColor(input_color) {    
  for (i = 0; i < 3; i++) {
    rowOne[i].changeColor(input_color);
    rowTwo[i].changeColor(input_color);
    rowThree[i].changeColor(input_color);
  }
}

函数changedotColor（输入颜色）{
对于（i=0；i<3；i++）{
rowOne[i].changeColor（输入颜色）；
第二行[i]。更改颜色（输入颜色）；
第三行[i]。更改颜色（输入颜色）；
}
}

---

另一种方法是修改

render

方法，以考虑实例变量的变化，即圆形对象的

color

值。

根据您发布的代码，

changedotColor

将更新

dotcolor\u val

，但这不会更新

圆圈中的颜色

或

画布中的颜色

上下文。太棒了，这很有意义！谢谢

Circle.prototype.changeColor = function( rgbcolor ) {
    this.color = rgbcolor;
}

function changedotColor(input_color) {    
  for (i = 0; i < 3; i++) {
    rowOne[i].changeColor(input_color);
    rowTwo[i].changeColor(input_color);
    rowThree[i].changeColor(input_color);
  }
}