Как мне реализовать использование setTimer в javascript, чтобы увидеть линии, нарисованные "вживую" - PullRequest
Новая
       6

Как мне реализовать использование setTimer в javascript, чтобы увидеть линии, нарисованные "вживую"

0 голосов
/ 13 января 2019

(я присоединяюсь к фрагменту полного html-файла, на который вы можете посмотреть, он довольно маленький и простой)

Я рисую наборы линий на холсте с функцией.

Я вижу все строки сразу после завершения функции.

Я видел, что setTimeout позволит мне запускать функцию порциями (с пакетом), чтобы я мог видеть нарисованные линии "вживую".

Я также хотел бы отобразить сообщение о ходе выполнения (т. Е. Количество выполненных прогонов) в промежутке, содержащем «Нажмите здесь!» текст.

Я уверен, что есть многие из вас, для которых потребуется всего несколько минут, чтобы изменить мой код, чтобы он это сделал.

Я пробовал несколько раз, и, будучи новичком в этом, это не сработало.

Я надеюсь, что кто-то примет вызов. 

<html>
  <head>
    <title>Test of Timer function..</title>
  </head>
  <body>
    <div id="number_of_points_div" style="padding-top: 5px; padding-bottom: 10px; padding-left: 20px;">
      # of Points:&nbsp;<input type="text" size="3" id="number_of_points_id" value="13" />
      # of Runs:&nbsp;<input type="text" size="3" id="number_of_runs_id" value="5" /><span id="info_span"  style="padding-top: 0px; padding-bottom: 0px; padding-left: 20px; padding-right: 20px; margin-left: 10px; background: yellow; cursor: pointer;" onclick="prefill();">Click Here!</span>
    </div>
    <canvas id="main-canvas" style="border: solid #000000 1px;" onclick="console.clear();"></canvas>
    <script>
      var TAU = Math.PI * 2;
      var main_canvas_width = 1000;
      var main_canvas_height = 500;
      var main_canvas = document.getElementById("main-canvas");
      main_canvas.width = main_canvas_width;
      main_canvas.height = main_canvas_height;
      var ctx_main = main_canvas.getContext("2d");
      var run_number = 0;

      function prefill() {
        ctx_main.fillStyle = "white";
        ctx_main.fillRect(0, 0, main_canvas_width, main_canvas_height);
        var N = document.getElementById("number_of_runs_id").value;
        var NC = document.getElementById("number_of_points_id").value;
        var R0 = 20;
        var X0 = 25;
        var Y0 = 250;
        var R0_inc = 50;
        var X0_inc = 100;
        var Y0_inc = 0;
        do_chryzoids(N, NC, R0, R0_inc, X0, X0_inc, Y0, Y0_inc);
      }

      function do_chryzoids(N, NC, R0, R0_inc, X0, X0_inc, Y0, Y0_inc) {
        for (run_number = 0; run_number < N; run_number++) {
           do_chryzoids_one_run(N, NC, R0 + run_number * R0_inc, X0 + run_number * X0_inc, Y0 + run_number * Y0_inc);
        }
      } // end of do_chryzoids(7) function
      // end of do_chryzoids(7) function

      function do_chryzoids_one_run(N, NC, R0_given, X0_given, Y0_given) {
          for (var i = 0; i < NC; i++) {
            // do the lines on the circumference of the preview
            draw_chryzoids_circumference_line(NC, X0_given, Y0_given, R0_given, i, 1, "red");
            for (var j = i + 1; j < NC; j++) {
              draw_chryzoids_inner_line(NC, X0_given, Y0_given, R0_given, i, j, 1, "blue");
            }
          }
      } // end of do_chryzoids_one_run(1) function
      // end of do_chryzoids_one_run(1) function

      function draw_chryzoids_circumference_line(NC_given, X0_given, Y0_given, R0_given, i_given, lineWidth_given, current_color_given) {
        draw_line(X0_given + R0_given * Math.cos(i_given * TAU / NC_given),
                  Y0_given + R0_given * Math.sin(i_given * TAU / NC_given),
                  X0_given + R0_given * Math.cos((i_given + 1) * TAU / NC_given),
                  Y0_given + R0_given * Math.sin((i_given + 1) * TAU / NC_given), lineWidth_given, current_color_given);
      } // end of draw_chryzoids_circumference_lines(6) function
      // end of draw_chryzoids_circumference_lines(6) function

      function draw_chryzoids_inner_line(NC_given, X0_given, Y0_given, R0_given, i_given, j_given, lineWidth_given, current_color_given) {
        draw_line(X0_given + R0_given * Math.cos(i_given * TAU / NC_given),
                  Y0_given + R0_given * Math.sin(i_given * TAU / NC_given),
                  X0_given + R0_given * Math.cos(j_given * TAU / NC_given),
                  Y0_given + R0_given * Math.sin(j_given * TAU / NC_given), lineWidth_given, current_color_given);
      } // end of draw_chryzoids_inner_line(7) function
      // end of draw_chryzoids_inner_line(7) function

      function draw_line(x_from, y_from, x_to, y_to, lineWidth_given, current_color_given) {
        ctx_main.strokeStyle = current_color_given;
        ctx_main.beginPath();
        ctx_main.moveTo(x_from, y_from);
        ctx_main.lineTo(x_to, y_to);
        ctx_main.stroke();
        ctx_main.closePath();
      } // end of draw_line(1) function
      // end of draw_line(1) function

    </script>
  </body>
</html>
...