Rysowania zygzaka w canvas

0

Witajcie,

jak dokładnie poniższy kod tworzy zygzag?


   ....
  var startX  = 85;
  var startY = 70;
  var zigzagSpacing = 60;

//rysowanie siedmiu linii prostych
for (var n=0; n<7; n++) {
      var x = startX + ((n+1) * zigzagSpacing);   //1. nie rozumiem po co tutaj jest (n+1)
      var y;
      if (n%2 ==0) {            // 2. jeśli jest liczba parzysta to następuje przesunięcie o 100 w dół od ostatniej pozycji startY?
          y = startY + 100; 
     }
    else {                          // 3. jeśli nieparzysta to y przypisywana jest obecna pozycja startyY?
            y = startY;
     }
  context.linetTo (x,y);![title](http://)![title](http://)![title](http://)
   }
context.stroke();
}

Tak to wygląda:

1

Na swoje pytania możesz sam odpowiedzieć, modyfikując kod i porównując rezultaty...

Czy nie brakuje Ci wywołania moveto?
https://www.w3schools.com/tags/canvas_lineto.asp

Najlepiej prześledź sobie po kolei jak się zmieniają x, y. Pewne operacje muszą być wykonane w odpowiedniej kolejności, żeby linia szła na zmiany góra-dół.

1

context.linetTo

literówka.

//rysowanie siedmiu linii prostych

jeśli coś iteruje od 0 do 7, to jest osiem iteracji. Więc osiem odcinków, a nie "linii prostych". Aczkolwiek na rysunku faktycznie jest tych odcinków 7. Zgaduję, że to dlatego, że brak moveTo?

var x = startX + ((n+1) * zigzagSpacing); //1. nie rozumiem po co tutaj jest (n+1)

Jak dla mnie, to mogłoby być i n * zigzagSpacing, jeśli jest n + 1, to zapewne po prostu gdzieś wcześniej jest/powinno by moveTo, i wtedy to ma sens. moveTo ustawia pozycję do rysowania, więc zakładając, że pozycja x będzie równa startX, to rysując lineTo musimy już przejść do kolejnego punktu, a więc n + 1.

Chociaż w tej sytuacji można by było też iterować od jednego (for (var n=1; n<8; n++)), tylko wtedy zygzak trochę inaczej by wyglądał, jeśli zaczynałbyś od liczby nieparzystej (bo tam jest n%2 ==0).

1

Wywołania line lineTo budują ścieżkę w kontekście. Dopiero wywołanie stroke rysuje zygzak.

0

@LukeJL: jeszcze trochę i pewnie załapię :) Punkt startowy od którego zaczyna się rysowanie to 87/75. W pierwszym przypadku n=0 czyli w ciele instrukcji to n+1 otrzyma wartość 1. Czyli 85 +1 * 60. To co dokładnie jes to n, które jest inkrementowane? Z tego co sam kombinuje to n odpowiada za to, pod jakim skosem będzie narysowania pierwsza linia (hmm).

Oto cały kod


<!DOCTYPE html>
<html>
    <head>
        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                var startX = 85;
                var startY = 70;
                var zigzagSpacing = 60;

                context.lineWidth = 10;
                context.strokeStyle = "#0096FF";
                context.beginPath();
                context.moveTo(startX, startY);


                for  (var n = 0; n<7; n++) {
                    var x= startX + ((n+1) * zigzagSpacing);
                    var y;
                    if (n%2==0){
                        y = startY +100;
                    }
                    else {
                        y = startY;
                    }
                    context.lineTo (x,y);
                }

                context.stroke();
            };

                
                
                
    

        </script>

    </head>

<body>
   <canvas id = "myCanvas" width = "600" height="250" style="border: 1px solid black">

   </canvas>
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1