如何將範圍/輸入滑塊添加到畫布動畫上？

我打算將滑塊附加到此codepen動畫上，以便用戶可以編輯動畫的速度。如何將範圍/輸入滑塊添加到畫布動畫上？

此刻，我沒有收到任何錯誤，但我沒有從傳遞給動畫的輸入滑塊中獲取值。

this.speed  = dotSpeed;

我的目標是從滑塊的值，創建一個變量，並通過「功能圓」屬性。

var dotArray = []; 
 

 
function threeDotSliderChangeSpeed (value) { 
 
        document.getElementById('threeDotSpeed').innerHTML = value; 
 
        dotSpeed = +value; // + will convert the string to number 
 
       for (var i = 0; i < dotArray.length; i++) { 
 
        dotArray[i].speed = Math.round(1 * dotSpeed); 
 
       } 
 
      } 
 
      
 

 
\t var canvas = document.getElementById('canvas2'), 
 
\t \t c = canvas.getContext('2d'), 
 
\t \t i = 0, 
 
\t \t rowOne = [], 
 
\t \t rowTwo = [], 
 
\t \t rowThree = [], 
 
\t \t length = canvas.width * 0.4, 
 
\t \t origin = [ canvas.width/2, canvas.height/2 ], 
 
\t \t angle = 90, 
 
     dotSpeed = 2, 
 
\t \t loop; 
 

 
\t function Circle(args) { 
 
\t \t this.position = [ 0, 0 ]; 
 
\t \t this.angle  = 30; 
 
\t \t this.speed  = dotSpeed; 
 
\t \t this.offset = 1; 
 
\t \t this.length = 100; 
 
\t \t this.size  = 5; 
 
\t \t this.color  = '#fff'; 
 
\t \t this.direction = 'grow'; 
 

 
\t \t if ('undefined' !== typeof args.position) 
 
\t \t \t this.position = args.position; 
 
\t \t if ('undefined' !== typeof args.angle) 
 
\t \t \t this.angle = args.angle; 
 
\t \t if ('undefined' !== typeof args.speed) 
 
\t \t \t this.speed = args.speed; 
 
\t \t if ('undefined' !== typeof args.length) 
 
\t \t \t this.length = args.length; 
 
\t \t if ('undefined' !== typeof args.size) 
 
\t \t \t this.size = args.size; 
 
\t \t if ('undefined' !== typeof args.color) 
 
\t \t \t this.color = args.color; 
 
\t \t if ('undefined' !== typeof args.offset) { 
 
\t \t \t this.offset = args.offset; 
 
\t \t \t this.length = canvas.width * this.offset * 0.03 
 
\t \t } 
 
\t } 
 

 
\t Circle.prototype.render = function() { 
 
\t \t this.move(); 
 
\t \t this.draw(); 
 
\t } 
 

 
\t Circle.prototype.draw = function() { 
 
\t \t c.fillStyle = this.color; 
 
\t \t c.beginPath(); 
 
\t \t c.arc(this.position[0], this.position[1], (this.size/2), 0, Math.PI * 2, true); 
 
\t \t c.closePath(); 
 
\t \t c.fill(); 
 
\t } 
 

 
\t Circle.prototype.move = function() { 
 
\t \t this.angle = (this.angle < 360) ? this.angle + this.speed : 0; 
 

 
\t \t if ('grow' == this.direction) { 
 
\t \t \t this.length++; 
 
\t \t \t this.direction = (150 >= this.length) ? 'grow' : 'shrink'; 
 
\t \t } else { 
 
\t \t \t this.length--; 
 
\t \t \t this.direction = (50 <= this.length) ? 'shrink' : 'grow'; 
 
\t \t } 
 

 
\t \t this.position[0] = this.length * Math.sin(this.angle * (Math.PI/180)); 
 
\t \t this.position[1] = this.length * Math.cos(this.angle * (Math.PI/180)); 
 

 
\t \t this.position[0] = this.position[0] + origin[0]; 
 
\t \t this.position[1] = this.position[1] + origin[1]; 
 
\t } 
 

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

 
\t function render() { 
 
\t \t c.fillStyle = 'rgba(0, 0, 0, 0.025)'; 
 
\t \t c.fillRect(0, 0, canvas.width, canvas.height); 
 
\t \t for (i = 0; i < 9; i++) { 
 
\t \t \t rowOne[i].render(); 
 
\t \t \t rowTwo[i].render(); 
 
\t \t \t rowThree[i].render(); 
 
\t \t } 
 
\t } 
 

 
\t (function animate() { 
 
\t \t render(); 
 
\t \t loop = setTimeout(animate, 40); 
 
\t })();

<!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" onchange="threeDotSliderChangeSpeed(3)"/> 
 
    <br /> <br /> 
 
    <script src="js/index.js"></script> 
 
    </body> 
 
</html>

這裏是另外一個我放開了，那麼用同樣的方法的視頻。

https://www.youtube.com/watch?v=vjZ6CfQ2WrY&feature=youtu.be

來源

2015-05-02 Sam Mcleod

要想從您需要使用document.getElementById('rg').value上改變事件

JS擺脫元素值滑塊值：

var dotArray = []; 

function threeDotSliderChangeSpeed() { 
    var value = document.getElementById('rg').value; 
    alert(value); 
    document.getElementById('threeDotSpeed').innerHTML = value; 
    dotSpeed = +value; // + will convert the string to number 
    for (var i = 0; i < dotArray.length; i++) { 
     dotArray[i].speed = Math.round(1 * dotSpeed); 
    } 
} 


var canvas = document.getElementById('canvas2'), 
    c = canvas.getContext('2d'), 
    i = 0, 
    rowOne = [], 
    rowTwo = [], 
    rowThree = [], 
    length = canvas.width * 0.4, 
    origin = [ canvas.width/2, canvas.height/2 ], 
    angle = 90, 
    dotSpeed = 2, 
    loop; 

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

    if ('undefined' !== typeof args.position) 
     this.position = args.position; 
    if ('undefined' !== typeof args.angle) 
     this.angle = args.angle; 
    if ('undefined' !== typeof args.speed) 
     this.speed = args.speed; 
    if ('undefined' !== typeof args.length) 
     this.length = args.length; 
    if ('undefined' !== typeof args.size) 
     this.size = args.size; 
    if ('undefined' !== typeof args.color) 
     this.color = args.color; 
    if ('undefined' !== typeof args.offset) { 
     this.offset = args.offset; 
     this.length = canvas.width * this.offset * 0.03 
    } 
} 

Circle.prototype.render = function() { 
    this.move(); 
    this.draw(); 
} 

Circle.prototype.draw = function() { 
    c.fillStyle = this.color; 
    c.beginPath(); 
    c.arc(this.position[0], this.position[1], (this.size/2), 0, Math.PI * 2, true); 
    c.closePath(); 
    c.fill(); 
} 

Circle.prototype.move = function() { 
    this.angle = (this.angle < 360) ? this.angle + this.speed : 0; 

    if ('grow' == this.direction) { 
     this.length++; 
     this.direction = (150 >= this.length) ? 'grow' : 'shrink'; 
    } else { 
     this.length--; 
     this.direction = (50 <= this.length) ? 'shrink' : 'grow'; 
    } 

    this.position[0] = this.length * Math.sin(this.angle * (Math.PI/180)); 
    this.position[1] = this.length * Math.cos(this.angle * (Math.PI/180)); 

    this.position[0] = this.position[0] + origin[0]; 
    this.position[1] = this.position[1] + origin[1]; 
} 

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

function render() { 
    c.fillStyle = 'rgba(0, 0, 0, 0.025)'; 
    c.fillRect(0, 0, canvas.width, canvas.height); 
    for (i = 0; i < 9; i++) { 
     rowOne[i].render(); 
     rowTwo[i].render(); 
     rowThree[i].render(); 
    } 
} 

(function animate() { 
    render(); 
    loop = setTimeout(animate, 40); 
})();

HTML：

<!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>

我是abl e得到滑動值的警報你可以看到輸出在編碼 http://codepen.io/anon/pen/aOOjXE

來源

2015-05-02 08:50:02

好吧，那真棒。所以滑塊工作完美 –

現在讓滑塊響應..我想讓滑塊的值響應和實際更新畫布動畫，我會不知何故需要使用js告訴畫布重新繪製每次滑塊值被改變。任何提示如何在這方面有一個裂縫？ –

你可以調用渲染滑塊更改監聽器可能會有所幫助。 –

如何將範圍/輸入滑塊添加到畫布動畫上？

回答

相關問題