Javascript странное поведение холста в цикле for - PullRequest
Новая
       5

Javascript странное поведение холста в цикле for

0 голосов
/ 07 мая 2020

Я пытаюсь создать график c холста, вращая эллипсы вокруг центральной точки. Однако когда я это делаю, for l oop создает странное изображение. Есть спорадические c промежутков между эллипсами, и цвета странные. Сначала я подумал, что неправильно вычисляю углы, но в этом случае зазоры не должны быть спорадическими c, поскольку я увеличиваю их с равными приращениями на каждой итерации для l oop. Затем я подумал, что, может быть, я слишком много раз зацикливаюсь, но если это так, должны быть только цвета, а не пробелы. Это заставляет меня думать, что это асинхронная проблема, когда, возможно, контекст не завершил sh сдвиг до того, как следующая итерация начала рисовать следующий круг, но это всего лишь предположение. Что может быть не так и как это исправить?

Вот jsfiddle, там всего 6 эллипсов, а должно быть 10, что происходит? https://jsfiddle.net/vj7csL3b/

<!DOCTYPE html>
<html>
  <body>
    <canvas id="canvas" width="200" height="200"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      const ctx = canvas.getContext("2d");

      let color = "#0000ff";
      let numberOfEllipses = 10;
      let lineThickness = 3;
      let middleW = 150;
      let middleL = 150;
      let eWidth = 50;
      let eHeight = 50;
      let fill = "rgba(0,0,255,0.2)";
      let shift = 50;
      let rotate = ((Math.PI / 180) * 360) / 10;
      //console.log(middleW, middleL, dfc);
      for (let i = 1; i < 10 + 1; i++) {
        //translate to point of rotation, rotate and translate back
        ctx.translate(middleW, middleL);
        ctx.rotate(rotate * i);
        ctx.translate(-1 * middleW, -1 * middleL);
        ctx.beginPath();

        // draws ellipse shifted from the middle we are rotating around.
        ctx.ellipse(
          middleW + shift,
          middleL + shift,
          eWidth,
          eHeight,
          0,
          0,
          2 * Math.PI
        );
        ctx.strokeStyle = color;

        ctx.lineWidth = lineThickness;
        ctx.fillStyle = fill;
        ctx.stroke();
        ctx.fill();
      }
    </script>
  </body>
</html>

1 Ответ

0 голосов
/ 07 мая 2020

Круги на самом деле перекрывали друг друга. Изменение угла поворота и сдвига даст ожидаемый результат. 

  const canvas = document.getElementById("canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  const ctx = canvas.getContext("2d");

  let color = "#0000ff";
  let numberOfEllipses = 10;
  let lineThickness = 3;
  let middleW = 150;
  let middleL = 150;
  let eWidth = 50;
  let eHeight = 50;
  let fill = "rgba(0,0,255,0.2)";
  let shift = 60;
  let rotate = ((Math.PI / 180) * 360) / 60;
  //console.log(middleW, middleL, dfc);
  for (let i = 1; i < 10 + 1; i++) {
    //console.log("paiting circle" + i);
     ctx.translate(middleW, middleL);
    ctx.rotate(rotate * i);
    ctx.translate(-1 * middleW, -1 * middleL);
    ctx.beginPath();
    ctx.ellipse(
      middleW + shift,
      middleL + shift,
      eWidth,
      eHeight,
      0,
      0,
      2 * Math.PI
    );
    ctx.strokeStyle = color;

    ctx.lineWidth = lineThickness;
    ctx.fillStyle = fill;
    ctx.stroke();
    ctx.fill();

  }
...