Javascript改變輸入或下拉菜單

Question

我在這裏有一段代碼，並進入我的畫布，它顯示了10個三角形進入一個圓圈，但我的問題是變量是10（var aantal = 10）。我想要一個下拉菜單，人們可以說畫布中有多少個三角形需要旋轉。

這裏是如何看起來像現在：http://21248.hosts.ma-cloud.nl/bewijzenmap/periode4/SCT/10x3hoek/index.html

<canvas id="canvas" width="300" height="300"></canvas> 
<header>Your name</header> 

<script src="utils.js"></script> 
<script src="triangle.js"></script> 
<script> 
window.onload = function() { 
     var canvas = document.getElementById('canvas'); 
     context = canvas.getContext('2d'); 

     var omlaag = false; 
     var links = false; 
     var omhoog = false; 
     var speed = 0.5; 
     var posX = 0; 
     var posY = 0; 
     var lifeCycle = 1; 

     var aantal = 10; 
     var triangle = []; 

     for (var i = 0; i < aantal; i++){ 
      triangle[i] = new Triangle; 
      triangle[i].xLeft = 20 + 30*i; 
      triangle[i].yLeft = 20 + 20*i; 

     } 

     (function drawFrame() { 
     window.requestAnimationFrame(drawFrame, canvas); 
     context.clearRect(0, 0, canvas.width, canvas.height); 

     for (var i = 0; i < aantal; i++){  

     triangle[i].x = posX; 
     triangle[i].y = posY; 

      switch (lifeCycle) { 
      case 1: 
       posX += speed; 
       if (posX >= canvas.width) { 
        lifeCycle = 2; 
       } 
       break; 
      case 2: 
       posY += speed; 
       if (posY >= canvas.height) { 
        lifeCycle = 3; 
       } 
       break; 
      case 3: 
       posX -= speed; 
       if (posX <= 0) { 
        lifeCycle = 4; 
       } 
       break; 
      case 4: 
       posY -= speed; 
       if (posY <= 0) { 
        lifeCycle = 1; 
       } 
       break; 
      } 
      triangle[i].draw(context); 
     }   

     }()); 
}; 
</script> 

Answer 1

window.onload = function() { 
    var aantal =prompt("Enter how many triangles to rotate?"); 

      var canvas = document.getElementById('canvas'); 
      context = canvas.getContext('2d'); 

      var omlaag = false; 
      var links = false; 
      var omhoog = false; 
      var speed = 0.5; 
      var posX = 0; 
      var posY = 0; 
      var lifeCycle = 1; 

      // aantal = 10; 
      var triangle = []; 

      for (var i = 0; i < aantal; i++){ 
       triangle[i] = new Triangle; 
       triangle[i].xLeft = 20 + 30*i; 
       triangle[i].yLeft = 20 + 20*i; 

      } 

      (function drawFrame() { 
      window.requestAnimationFrame(drawFrame, canvas); 
      context.clearRect(0, 0, canvas.width, canvas.height); 

      for (var i = 0; i < aantal; i++){  

      triangle[i].x = posX; 
      triangle[i].y = posY; 

       switch (lifeCycle) { 
       case 1: 
        posX += speed; 
        if (posX >= canvas.width) { 
         lifeCycle = 2; 
        } 
        break; 
       case 2: 
        posY += speed; 
        if (posY >= canvas.height) { 
         lifeCycle = 3; 
        } 
        break; 
       case 3: 
        posX -= speed; 
        if (posX <= 0) { 
         lifeCycle = 4; 
        } 
        break; 
       case 4: 
        posY -= speed; 
        if (posY <= 0) { 
         lifeCycle = 1; 
        } 
        break; 
       } 
       triangle[i].draw(context); 
      }   

      }()); 
    }; 

Answer 2

簡單的方法添加input和變化值作爲用戶改變

<input type="number" min="0" id="triangle" > 

只需按下ENTER .. ... then Javascript

var triangle=document.querySelector('#triangle'); 

triangle.addEventListener('change',function(e){ 
    aantal = this.value 
});