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

Question

我正在尝试在 canvas 上制作可自定义的动画。

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

目前我没有收到对点击按钮的任何回应

html

  <button onclick="changedotColor('rgb(63,169,245)')"  ><img  id="blue" class="swatch"></button>

js

var dotcolor_val = "rgb(6,250,212)";
function changedotColor(input_color){
dotcolor_val = input_color;
console.log(input_color)
}

function Circle( args ) {
this.position  = [ 0, 0 ];
this.angle     = 30;
this.speed     = dotSpeed;
this.offset    = 1;
this.length    = 80;
this.size      = 5;
this.color     = dotcolor_val;
this.direction = 'grow';
}

关于什么可以使这项工作有什么建议吗？//为什么这目前不起作用？

非常感谢

Answer 1

您正在通过函数 changedotColor() 更改局部变量 dotcolor_val，但是，此变量值的更改未反映在 Circle 个实例中。

这是工作代码的link：http://codepen.io/anon/pen/RPrQVW

说明

在您的代码中，您定义了一个对象 Circle，其中 function Circle(args) 具有一些属性。

您正在 实例化 并将这些 Circle 对象推入 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
  }));
}

rowOne、rowTwo 和 rowThree 包含您创建的 Circle 对象。因此，一种改变你创建的圆圈颜色的方法是做两件事：

在Circle对象中定义一个新的函数来改变对象的颜色，例如：

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

当您触发函数 changedotColor() 时，您需要遍历 3 个列表及其子列表并触发 changeColor 函数，例如：

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);
  }
}

另一种方法是修改您的 render 方法以考虑实例变量的变化，即 Circle 对象的 color 值。

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

Passing a color through a variable in a canvas animation

javascript

css

rgb

html5-canvas

说明