[ Leksykon ] [ HTML ] [ JavaScript ] [ Obiekty ] [ canvas ]

Obiekt Path2D()

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

new Path2D()
new Path2D(path)
new Path2D(d)

 

Konstruktor Path2D():

Path2D() - konstruktor tworzy nowy OffscreenCanvas obiekt

Konstruktor Path2D() zwraca nowo utworzony Path2D obiekt, opcjonalnie z inną ścieżką jako argumentem tworzy kopię lub opcjonalnie z ciągiem znaków składającym się z danych ścieżki SVG. Parametry path - opcjonalny, po wywołaniu z innym Path2D obiektem tworzona jest kopia argumentu path. d - opcjonalny, po wywołaniu z ciągiem znaków składającym się z danych ścieżki SVG, na podstawie tego opisu tworzona jest nowa ścieżka.

Metody Path2D():

Path2D addPath() - dodaje jeden Path2D obiekt do innego Path2D obiektu, plus transform
Path2D closePath() - rysuje linię prostą od bieżącego punktu do początku
Path2D moveTo() - przesuwa punkt początkowy nowej ścieżki do x, y
Path2D lineTo() - łączy ostatni punkt podścieżki x, y współrzędnymi linią prostą
Path2D bezierCurveTo() - dodaje do ścieżki sześcienną krzywą Béziera do bieżącej ścieżki
Path2D quadraticCurveTo() - dodaje kwadratową krzywą Béziera do bieżącej ścieżki
Path2D arc() - dodaje łuk do ścieżki wyśrodkowanej w x, y  i promieniu radius
Path2D arcTo() - dodaje do aktualnej ścieżki łuk o podanych punktach kontrolnych i promieniu
Path2D ellipse() - dodaje łuk eliptyczny do ścieżki
Path2D rect() - tworzy ścieżkę dla prostokąta w pozycji x, y o rozmiarze width i height
Path2D roundRect() - tworzy ścieżkę dla zaokrąglonego prostokąta, promieniach narożników

Rysowanie ścieżek CanvasRenderingContext2D():

canvas fill() - Wypełnia bieżące ścieżki podrzędne bieżącym stylem wypełnienia
canvas stroke() - Obrysowuje bieżące ścieżki bieżącym stylem obrysu
canvas drawFocusIfNeeded() - Jeśli dany element jest fokus, metoda ta rysuje pierścień wokół bieżącej ścieżki
canvas scrollPathIntoView() - Eksperymentalny. Przewija bieżącą ścieżkę lub daną ścieżkę do widoku
canvas clip() - Tworzy ścieżkę przycinającą
canvas isPointInPath() - Raportuje, czy określony punkt znajduje się w bieżącej ścieżce
canvas isPointInStroke() - Raportuje, czy określony punkt znajduje się w obszarze objętym obrysem ścieżki

Ścieżki, manipulowania ścieżkami obiektów CanvasRenderingContext2D():

canvas beginPath() - Rozpoczyna nową ścieżkę
canvas closePath() - Punkt pióra cofa się na początek bieżącej ścieżki, linię prostą od bieżącego punktu do początku
canvas moveTo() - Rozpoczyna nową podścieżkę w punkcie x, y
canvas lineTo() - dodaje linię prostą do bieżącej ścieżki podrzędnej z określonymi współrzędnymi x, y
canvas bezierCurveTo() - Dodaje sześcienną krzywą Béziera do bieżącej ścieżki
canvas quadraticCurveTo() - Dodaje kwadratową krzywą Béziera do bieżącej ścieżki
canvas arc() - Tworzy łuk kołowy o środku (x, y) i promieniu radius
canvas arcTo() - Dodaje do aktualnej ścieżki łuk o podanych punktach kontrolnych i promieniu
canvas ellipse() - Dodaje łuk eliptyczny do bieżącej ścieżki
canvas rect() - Tworzy ścieżkę dla prostokąta w pozycji x, y, o rozmiarze szerokość i wysokość
canvas roundRect() - Tworzy ścieżkę dla zaokrąglonego prostokąta, promieniach narożników

 

Przykłady:

<script>

 window.onload = () => {

 const szer = 300;
 const wys = 300;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d", { willReadFrequently: true,}); 

 let path1 = new Path2D();
 path1.rect(120, 100, 100, 100);

 let path2 = new Path2D(path1);
 path2.moveTo(270, 150);
 path2.arc(170, 150, 100, 0, 2 * Math.PI);

 ctx.stroke(path2);
 
 let path3 = new Path2D("M21.811,106.369l-3.254,10.335h-4.185l10.694-32.859h4.835l10.693,3
2.859h-4.324l-3.347-10.335H21.811z M32.179,102.822l-3.115-9.458c-0.697-2.145-1.162-4.095-1.6
27-5.997h-0.093c-0.465,1.901-0.93,3.949-1.581,5.948l-3.069,9.507H32.179z");
 ctx.fill(path3);

 return;

 };

</script>

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

 

<script>

 window.onload = () => {

 const szer = 300;
 const wys = 300;

 const canvas = document.getElementById("canvas");
 canvas.width = szer;
 canvas.height = wys; 
 const ctx = canvas.getContext("2d", { willReadFrequently: true,}); 

 let path1 = new Path2D();
 path1.rect(120, 100, 100, 100);

 let path2 = new Path2D(path1);
 path2.moveTo(270, 150);
 path2.arc(170, 150, 100, 0, 2 * Math.PI);

 ctx.stroke(path2);

 return;

 };

</script>

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

 

Opis:
Interfejs Path2D służy do deklarowania ścieżki, która może być następnie użyta w CanvasRenderingContext2D obiekcie. Metody ścieżki interfejsu są CanvasRenderingContext2D również obecne w tym interfejsie, co zapewnia wygodę w postaci możliwości zachowania i odtworzenia ścieżki w dowolnym momencie.

  

Linki:
CanvasRenderingContext2D() - Interfejs CanvasRenderingContext2D zapewnia kontekst renderowania 2D dla <canvas>