Javascript：动态更改正弦波速度

也许我很愚蠢，但我需要帮助做一件简单的事情

我想在点击按钮时将正弦波的速度从通常的2更改为10。没什么了，但我想不出怎么做

Github链接到SineWave.js：

守则：

var waves = new SineWaves({
  el: document.getElementById('waves'),
  speed: 2,
  ease: 'SineInOut',
  wavesWidth: '75%',
  waves: [
    {
      timeModifier: 4,
      lineWidth: 1,
      amplitude: -25,
      wavelength: 25
    },
    {
      timeModifier: 2,
      lineWidth: 1,
      amplitude: -10,
      wavelength: 30
    },
    {
      timeModifier: 1,
      lineWidth: 1,
      amplitude: -30,
      wavelength: 30
    },
        {
      timeModifier: 3,
      lineWidth: 1,
      amplitude: 40,
      wavelength: 40
    },
    {
      timeModifier: 0.5,
      lineWidth: 1,
      amplitude: -60,
      wavelength: 60
    },
    {
      timeModifier: 1.3,
      lineWidth: 1,
      amplitude: -40,
      wavelength: 40
    }
  ],

  resizeEvent: function() {
    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
    gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
    gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
    gradient.addColorStop(1,"rgba(255, 255, 25, 0");

    var index = -1;
    var length = this.waves.length;
      while(++index < length){
      this.waves[index].strokeStyle = gradient;
    }

    index = void 0;
    length = void 0;
    gradient = void 0;
  }
});

请帮帮我，因为这个我现在就要死了。。。

---

（甚至可能是一个小小的改变）

如果你查看你的waves对象，你会发现它在选项中有一个speed参数，因此你可以通过以下方式改变speed liek：

<button onclick="waves.options.speed = 10;">hmmm</button>

hmmm

如果查看waves对象，您将看到它在选项中有一个速度参数，因此您可以通过以下方式更改速度：

<button onclick="waves.options.speed = 10;">hmmm</button>

hmmm

下面是一个使用jQuery的实现：

var波=新正弦波({
el:document.getElementById（'waves'），
速度:2,，
放松：“SineInOut”，
wavesWidth:'75%'，
波浪：[
{
时间修改器：4，
线宽：1，
振幅：-25，
波长：25
},
{
时间修改器：2，
线宽：1，
振幅：-10，
波长：30
},
{
时间修饰符：1，
线宽：1，
振幅：-30，
波长：30
},
{
时间修改器：3，
线宽：1，
振幅：40，
波长：40
},
{
时间修改器：0.5，
线宽：1，
振幅：-60，
波长：60
},
{
时间修改器：1.3，
线宽：1，
振幅：-40，
波长：40
}
],
resizeEvent:函数（）{
var gradient=this.ctx.createLinearGradient（0，0，this.width，0）；
渐变。添加颜色停止（0，“rgba（25，255，255，0）”；
渐变。添加颜色停止（0.5，“rgba（255，25，255，0.75）”；
渐变。添加颜色停止（1，“rgba（255，255，25，0”）；
var指数=-1；
var length=this.waves.length；
而（++索引<长度）{
这个.waves[index].strokeStyle=gradient；
}
指数=0；
长度=0；
梯度=0；
}
});
$（“#更改速度”）。单击（函数（）{
waves.options.speed=10；
})；

更改速度

下面是一个使用jQuery的实现：

var波=新正弦波({
el:document.getElementById（'waves'），
速度:2,，
放松：“SineInOut”，
wavesWidth:'75%'，
波浪：[
{
时间修改器：4，
线宽：1，
振幅：-25，
波长：25
},
{
时间修改器：2，
线宽：1，
振幅：-10，
波长：30
},
{
时间修饰符：1，
线宽：1，
振幅：-30，
波长：30
},
{
时间修改器：3，
线宽：1，
振幅：40，
波长：40
},
{
时间修改器：0.5，
线宽：1，
振幅：-60，
波长：60
},
{
时间修改器：1.3，
线宽：1，
振幅：-40，
波长：40
}
],
resizeEvent:函数（）{
var gradient=this.ctx.createLinearGradient（0，0，this.width，0）；
渐变。添加颜色停止（0，“rgba（25，255，255，0）”；
渐变。添加颜色停止（0.5，“rgba（255，25，255，0.75）”；
渐变。添加颜色停止（1，“rgba（255，255，25，0”）；
var指数=-1；
var length=this.waves.length；
而（++索引<长度）{
这个.waves[index].strokeStyle=gradient；
}
指数=0；
长度=0；
梯度=0；
}
});
$（“#更改速度”）。单击（函数（）{
waves.options.speed=10；
})；

更改速度

如果可以创建一个可链接到（例如，on或）的问题实例，则可以这样做，但也可以将代码包含在问题本身中。不是每个人都可以访问外部站点，链接可能会随着时间的推移而中断。如果可以创建一个可链接到的问题实例（例如，在或上）然后这样做-但也包括在你的问题本身的代码。不是每个人都可以访问外部网站，链接可能会随着时间的推移而中断。我还有一个问题：这对颜色也有效吗？当然看起来是这样，虽然这会更复杂。我真的很抱歉进一步打扰你，但你能给我任何关键字searc吗或者给我举个例子？我真的很感激你为我所做的工作：）您需要根据波浪设置笔划样式。您可能需要使用波浪对象中的ctx来执行类似于resizeEvent函数的操作。感谢您的快速回答。您真的帮助了我，我现在将尝试解决这个问题。^^我还有一个问题：这也适用于颜色吗？它看起来确实是这样，尽管这可能会更复杂。我真的很抱歉进一步打扰你，但是你能给我一些关键字来搜索吗？或者给我一个例子吗？我真的很感谢你为我所做的工作：）您需要根据波浪设置笔划样式。您可能需要使用波浪对象中的ctx来执行类似于resizeEvent函数的操作。感谢您的快速回答。您真的帮助了我，我现在将尝试解决这个问题。^^非常感谢您的回答和示例。但我希望您能很快再回答我一个问题stion：波浪的颜色也可能这样吗？这有点棘手，因为颜色是在

resizeEvent

函数中使用渐变设置的，而不是通过静态颜色属性设置的。您需要更新该函数，但快速尝试后，我无法使其正常工作。好的，谢谢您的回答。我将尝试更改nge将颜色设置为静态属性的功能。看看我的更新，它显示了如何设置静态颜色并通过单击按钮进行更改。哇..我不知道如何进一步感谢你。这很好，你也是。非常感谢你的回答和示例。但是如果你能很快回答我另一个问题：这是p吗也可能与波浪的颜色有关？这有点棘手，因为颜色是使用

resizeEvent中的渐变设置的