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

CanvasRenderingContext2D.lineCap

[_] [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.beginPath();
 ctx.moveTo(20, 20);
 ctx.lineWidth = 15;
 ctx.lineCap = "butt";
 ctx.lineTo(20, 100);
 ctx.stroke();
 
 ctx.beginPath();
 ctx.moveTo(120, 20);
 ctx.lineWidth = 15;
 ctx.lineCap = "round";
 ctx.lineTo(120, 100);
 ctx.stroke();
 
 ctx.beginPath();
 ctx.moveTo(220, 20);
 ctx.lineWidth = 15;
 ctx.lineCap = "square";
 ctx.lineTo(220, 100);
 ctx.stroke();
 
 };

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

Opis:
Właściwość CanvasRenderingContext2D.lineCap określa kształt używany do rysowania punktów końcowych linii. Linie można rysować metodami stroke(), strokeRect() i strokeText(). Wartość "butt" - końce linii są prostopadłe w punktach końcowych domyślna wartość, "round" - końce linii są zaokrąglone, "square" - końce linii wyrównujemy, dodając prostokąt o równej szerokości i połowie wysokości grubości linii.

Zobacz też:
stroke() - 
strokeRect() - 
strokeText() - 
beginPath() -