[ Leksykon ] [ JavaScript ] [ Metody ] [ canvas ] [ Path2D() ]

Path2D.addPath()

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

addPath(path)
addPath(path, transform)

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,32.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.627-5.997h-0.
 093c-0.465,1.901-0.93,3.949-1.581,5.948l-3.069,9.507H32.179z");

 let path4 = new Path2D("M21.811,206.369l-3.254,10.335h-4.185l10.694-32.859h4.835l10.693,32.859h-
 4.324l-3.347-10.335H21.811z M32.179,202.822l-3.115-9.458c-0.697-2.145-1.162-4.095-1.627-5.997h-0.
 093c-0.465,1.901-0.93,3.949-1.581,5.948l-3.069,9.507H32.179z");

 let path5 = new Path2D("M21.811,206.369l-3.254,10.335h-4.185l10.694-32.859h4.835l10.693,32.859h-
 4.324l-3.347-10.335H21.811z M32.179,202.822l-3.115-9.458c-0.697-2.145-1.162-4.095-1.627-5.997h-0.
 093c-0.465,1.901-0.93,3.949-1.581,5.948l-3.069,9.507H32.179z");
 
 path3.addPath(path4);
 
 let matrix = new DOMMatrix();
 matrix.a = 1;
 matrix.b = 0;
 matrix.c = 0;
 matrix.d = 1;
 matrix.e = 260;
 matrix.f = -100;
 
 path3.addPath(path5, matrix);

 ctx.fill(path3);

 return;

 };

</script>

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

Opis:
Metoda Path2D.addPath() interfejsu API Canvas 2D dodaje jeden Path2D obiekt do innego Path2D obiektu. Parametry path - ścieżka Path2D do dodania. transform - opcjonalny, DOMMatrix, który będzie używany jako macierz transformacji dla dodawanej ścieżki. Technicznie DOMMatrixInit obiekt. Wartość zwracana undefined.

Zobacz też:
DOMMatrix - 
ImageBitmap() - reprezentuje obraz bitmapowy, który można narysować canvas bez zbędnych opóźnień