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

CanvasRenderingContext2D.setLineDash()

[_] [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]

setLineDash(segments)

Przykłady:

<script>

 window.onload = () => {

 const szer = 600;
 const wys = 600;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d");
 
 ctx.setLineDash([5, 10, 15, 20, 25, 30]);
 //console.log(ctx.getLineDash());
 ctx.beginPath();
 ctx.moveTo(0, 20);
 ctx.lineTo(400, 20);
 ctx.stroke();

 ctx.setLineDash([5, 3, 3, 3, 3]);
 ctx.beginPath();
 ctx.moveTo(0, 40);
 ctx.lineTo(400, 40);
 ctx.stroke();

 ctx.setLineDash([10, 10]);
 ctx.beginPath();
 ctx.moveTo(0, 60);
 ctx.lineTo(400, 60);
 ctx.stroke();

 ctx.setLineDash([20, 3, 3, 3, 3]);
 ctx.beginPath();
 ctx.moveTo(0, 80);
 ctx.lineTo(400, 80);
 ctx.stroke();

 ctx.setLineDash([5, 10]);
 ctx.beginPath();
 ctx.moveTo(0, 100);
 ctx.lineTo(400, 100);
 ctx.stroke();
 
 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.setLineDash() ustawia wzór przerywanej linii używany, gdy głaskanie linii. Wykorzystuje tablicę wartości, które określają naprzemienne długości linii i luki opisujące wzór. Aby powrócić do używania linii ciągłych, ustaw listę przerywanych linii na pustą tablicę. Parametry segments - Array liczb określających odległości do naprzemiennego rysowania, linia i przerwa w jednostkach przestrzeni współrzędnych. Jeśli liczba elementów tablicy jest nieparzysta, elementy tablicy są kopiowane i łączone. Na przykład, [1, 3, 5] zmieni się na [1, 3, 5, 1, 3, 5]. Jeśli tablica jest pusta, lista kresek linii zostaje wyczyszczona, a obrysy linii wracają do stanu pierwotnego. Wartość zwracana undefined.

Zobacz też:
canvas getImageData() - Zwraca ImageData obiekt reprezentujący podstawowe dane pikseli dla obszaru