将变量更改为输入或下拉菜单

Javascript Changing variable to input or dropdown menu

本文关键字：输入下拉菜单变量更新时间：2023-09-26

我这里有一段代码，在我的画布上显示了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>

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

简单的方法添加input并随用户更改值

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

按下ENTER .....然后Javascript

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