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

简单方法添加SELECT * FROM table1 t JOIN (SELECT col1, col2, CONVERT(date, col3) as dt FROM table1 GROUP BY col1, col2, CONVERT(date, col3) HAVING COUNT(*) > 1) temp ON t.col1 = temp.col1 AND t.col2= temp.col2 and CONVERT(date, t.col3)=temp.dt ORDER By t.col1 desc并在用户更改时更改值

input

按<input type="number" min="0" id="triangle" > ..... 然后是Javascript

ENTER

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

2 个答案: