Javascript 如何将范围/输入滑块附加到画布动画上？_Javascript_Html_Animation_Html5 Canvas

Javascript 如何将范围/输入滑块附加到画布动画上？

javascript html animation html5-canvas

Javascript 如何将范围/输入滑块附加到画布动画上？,javascript,html,animation,html5-canvas,Javascript,Html,Animation,Html5 Canvas,我的目标是在这个代码笔动画上附加一个滑块，这样用户就可以编辑动画的速度 this.speed = dotSpeed; 目前，我没有得到任何错误，但是我没有从传递到动画的输入滑块获得值 this.speed = dotSpeed; 我的目标是从滑块中获取值，创建一个变量，并将其放入“函数圈”属性中 var dotArray=[]；函数threeDotSliderChangeSpeed（值）{ document.getElementById（'threeDotSp

我的目标是在这个代码笔动画上附加一个滑块，这样用户就可以编辑动画的速度

   this.speed     = dotSpeed;

目前，我没有得到任何错误，但是我没有从传递到动画的输入滑块获得值

   this.speed     = dotSpeed;

我的目标是从滑块中获取值，创建一个变量，并将其放入“函数圈”属性中

var dotArray=[]；
函数threeDotSliderChangeSpeed（值）{
document.getElementById（'threeDotSpeed'）。innerHTML=value；
dotSpeed=+value；//+将字符串转换为数字
对于（var i=0；i=this.length）？“增长”：“收缩”；
}否则{
这个长度--；
this.direction=（50要从滑块获取值，需要从元素获取值
在更改事件上使用document.getElementById（'rg'）.value

js:
var dotArray=[]；
函数threeDotSliderChangeSpeed（）{
var value=document.getElementById（'rg'）.value；
警报（值）；
document.getElementById（'threeDotSpeed'）。innerHTML=value；
dotSpeed=+value；//+将字符串转换为数字
对于（var i=0；i=this.length）？“增长”：“收缩”；
}否则{
这个长度--；
这个方向=（50）现在要使滑块响应。我想要使滑块值响应并实际更新画布动画，我需要使用js在每次滑块值更改时告诉画布重新绘制。有没有关于如何对此进行破解的提示？您可以调用“滑块上渲染更改侦听器”可能会有所帮助。请尝试changing根据滑块速度检查超时时间间隔在这段代码中，你需要根据你的速度要求更改时间间隔，你可以在这部史诗中看到。谢谢！
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CodePen - 3 dotted-line canvas animation.</title>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="jquery-2.1.0.min.js"></script>
    </head>

    <body>
        <canvas id="canvas2" width="400" height="400"></canvas>
        <p id="attribute">Speed </p>
        <span id="threeDotSpeed" class="sliderSpan">5</span>
        <input type="range" min="0" max="10" value="5" step="1" id="rg" onchange="threeDotSliderChangeSpeed(3)"/>
        <br />
        <br />
        <script src="js/index.js"></script>
    </body>
</html>