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

CanvasRenderingContext2D.lineJoin

[_] [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");

 ctx.lineWidth = 25;
 ctx.lineJoin = "round";
 ctx.beginPath();
 ctx.moveTo(25, 25);
 ctx.lineTo(170, 110);
 ctx.lineTo(450, 30);
 ctx.lineTo(470, 100);
 ctx.stroke();
 
 
 ctx.lineWidth = 15;
 
 ["round", "bevel", "miter"].forEach((join, i) => {
 ctx.lineJoin = join;
 ctx.beginPath();
 ctx.moveTo(10, 150 + i * 30);
 ctx.lineTo(135, 195 + i * 30);
 ctx.lineTo(175, 150 + i * 30);
 ctx.lineTo(215, 195 + i * 30);
 ctx.lineTo(455, 150 + i * 30);
 ctx.stroke();
 });

 }

</script>

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

Opis:
Właściwość CanvasRenderingContext2D.lineJoin określa kształt używany do łączenia dwóch segmentów linii w miejscu ich styku. Linie można rysować metodami stroke(), strokeRect() i strokeText(). Istnieją trzy możliwe wartości tej właściwości: "round" - Zaokrągla rogi kształtu, wypełniając dodatkowy sektor dysku wyśrodkowany we wspólnym punkcie końcowym połączonych segmentów. Promień tych zaokrąglonych narożników jest równy szerokości linii, "bevel" - Wypełnia dodatkowy trójkątny obszar pomiędzy wspólnym punktem końcowym połączonych segmentów i oddzielnymi zewnętrznymi prostokątnymi narożnikami każdego segmentu, "miter" - Połączone segmenty łączy się poprzez przedłużenie ich zewnętrznych krawędzi tak, aby połączyć się w jednym punkcie, uzyskując efekt wypełnienia dodatkowego obszaru w kształcie rombu. Na to ustawienie ma wpływ właściwość miterLimit, "miter" to jest domyślna wartość. Wartość domyślna to "miter".

Zobacz też:
stroke() -
strokeRect() -
strokeText() -
miterLimit - właściwość 
forEach() -