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

CanvasRenderingContext2D.roundRect()

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

roundRect(x, y, width, height, radii)

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.strokeStyle = "red";
 ctx.beginPath();
 ctx.rotate((15 * Math.PI) / 180);
 ctx.roundRect(50, 0, 200, 100, 0);
 ctx.stroke();
 ctx.setTransform(1, 0, 0, 1, 0, 0);

 ctx.strokeStyle = "green";
 ctx.beginPath();
 ctx.roundRect(25, 150, 160, 80, [15, 30]);
 ctx.stroke();
 
 ctx.strokeStyle = "blue";
 ctx.beginPath();
 ctx.rotate((15 * Math.PI) / 180);
 ctx.roundRect(350, 300, 200, 100, [0, 20, 40, 60]);
 ctx.stroke();
 ctx.setTransform(1, 0, 0, 1, 0, 0);

 ctx.strokeStyle = "magenta";
 ctx.beginPath();
 ctx.roundRect(450, 180, -200, -100, [0, 20, 45, 70]);
 ctx.stroke();
 
 ctx.strokeStyle = "orange";
 ctx.beginPath();
 ctx.roundRect(40, 300, 180, 80, [40]);
 ctx.stroke();
 
 return;

 };

</script>

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

Opis:
Metoda CanvasRenderingContext2D.roundRect() dodaje zaokrąglony prostokąt do bieżącej ścieżki. Promienie narożników można określić w podobny sposób, jak właściwość CSS border-radius. Podobnie jak inne metody modyfikujące bieżącą ścieżkę, ta metoda nie renderuje niczego bezpośrednio. Aby narysować zaokrąglony prostokąt na płótnie, możesz użyć metod fill() lub stroke(). Parametry x - współrzędna osi x punktu początkowego prostokąta, w pikselach, y - współrzędna osi Y punktu początkowego prostokąta, w pikselach. width - szerokość prostokąta, wartości dodatnie znajdują się po prawej stronie, a ujemne po lewej stronie, height - wysokość prostokąta, wartości dodatnie spadają, a ujemne rosną, radii - liczba lub lista określająca promienie łuku kołowego, które mają być użyte w narożnikach prostokąta, liczba i kolejność promieni działają w taki sam sposób, jak właściwość border-radius CSS, gdy width i height są pozytywny: all-corners, [all-corners], [top-left-and-bottom-right, top-right-and-bottom-left], [top-left, top-right-and-bottom-left, bottom-right], [top-left, top-right, bottom-right, bottom-left]. Jeśli width jest ujemny, zaokrąglony prostokąt jest odwracany w poziomie, więc używane są wartości promienia, które normalnie odnoszą się do lewych rogów po prawej stronie i odwrotnie. Podobnie, gdy height jest liczbą ujemną, zaokrąglony prostokąt jest odwracany w pionie. Podane promienie można skalować (zmniejszać), jeśli którakolwiek z krawędzi jest krótsza niż łączny promień wierzchołków na każdym końcu. Parametr radii może być także instancją DOMPoint lub DOMPointReadOnly albo obiektem o tych samych właściwościach (< /span>{x: 0, y: 0}) lub listę takich obiektów, lub listę zawierającą liczby i takie obiekty. Wartość zwracana undefined. Wyjątki RangeError jeśli radii jest listą zawierającą zero lub więcej niż cztery elementy, lub jeśli jedna z jej wartości jest liczbą ujemną.

Zobacz też:
fill() - 
stroke() - 
DOMPoint - 
DOMPointReadOnly -