[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.lineDashOffset

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Przykłady:

<script>

   window.onload = () => {
   
      const szer = 600;
      const wys = 300;
      const canvas = document.getElementById("canvas");
      canvas.width = szer;
      canvas.height = wys; 
      const ctx = canvas.getContext("2d");

      let i = 0;
      let kolor = "black";

      function rysowanie() {

         ctx.clearRect(0, 0, canvas.width, canvas.height);

         ctx.setLineDash([5, 18]);

         ctx.beginPath();
         ctx.lineDashOffset = 0;
         ctx.moveTo(50, 25);
         ctx.lineTo(300, 25);
         ctx.stroke();

         ctx.beginPath();
         ctx.strokeStyle = "green";
         ctx.lineDashOffset = 10;
         ctx.moveTo(50, 40);
         ctx.lineTo(300, 40);
         ctx.stroke();

         ctx.strokeStyle = kolor;
         ctx.setLineDash([4, 2]);
         ctx.lineDashOffset = -i;
         ctx.strokeRect(10, 10, 100, 100);
      }

      function zadanie() {
         i++;
         if (i > 5) { 
            i = 0;
         } 
         rysowanie();
         setTimeout(zadanie, 50);
     }

      zadanie();

   };

</script>

<canvas id="canvas" width="1" height="1"></canvas>

Opis:
Właściwość CanvasRenderingContext2D.lineDashOffset ustawia przesunięcie kreski linii, czyli fazę. Linie są rysowane poprzez wywołanie stroke() metody. Wartość liczba zmiennoprzecinkowa określająca wielkość przesunięcia kreski linii. Wartość domyślna to 0.0.

Zobacz też:
stroke() -