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

CanvasPattern.setTransform()

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

setTransform(matrix)

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");

 const patternCanvas = document.createElement("canvas");
 const patternCtx = patternCanvas.getContext("2d");

 patternCanvas.width = 45;
 patternCanvas.height = 45;

 patternCtx.fillStyle = "orange";
 patternCtx.fillRect(0, 0, patternCanvas.width, patternCanvas.height);
 patternCtx.arc(22, 22, 20, 0, 2 * Math.PI);
 patternCtx.stroke();

 const pattern2 = ctx.createPattern(patternCanvas, "repeat");
 ctx.fillStyle = pattern2;
 ctx.fillRect(0, 45, canvas.width, canvas.height);

 document.body.appendChild(patternCanvas);

 ctx.fillStyle = "rgba(0,51,102,0.9)";
 ctx.font = "12px sans-serif";
 ctx.textAlign = "center";

 const img = new Image();
 img.src = "dom.jpg";
 img.onload = () => {

 const szer = img.width, wys = img.height;

 ctx.fillText("1:2 Wygładzanie = true", 75, 10);
 ctx.imageSmoothingEnabled = true; // Wygładzanie tak
 ctx.imageSmoothingQuality = "high";
 ctx.drawImage(img, 0, 25, szer / 2, wys / 2);

 ctx.fillText("1:1 Wygładzanie = false", 250, 10);
 ctx.imageSmoothingEnabled = false; // Wygładzanie nie
 ctx.drawImage(img, szer / 2, 25, szer, wys);

 ctx.fillText("2:1 Wygładzanie = true", 475, 10);
 ctx.imageSmoothingEnabled = true; // Wygładzanie tak
 ctx.imageSmoothingQuality = "low";
 ctx.drawImage(img, szer + szer / 4, 25, szer * 3, wys * 1);
 
 const matrix = new DOMMatrix([1, 0.1, 0.6, 1, 0, 0]);
 const pattern = ctx.createPattern(img, "repeat");
 pattern.setTransform(matrix.rotate(-15).scale(1.2));
 ctx.fillStyle = pattern;
 ctx.fillRect(0, 200, 600, 300);

 };
 
 document.body.appendChild(img);

 return;

 };

</script>

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

 let matrix = new DOMMatrix();
 matrix.a = 1;
 matrix.b = 0;
 matrix.c = 0;
 matrix.d = 1;
 matrix.e = 260;
 matrix.f = -100;

Opis:
Metoda CanvasPattern.setTransform() wykorzystuje DOMMatrix obiekt jako macierz transformacji wzorca i wywołuje go na wzorcu. Parametry matrix - DOMMatrix, który będzie używany jako macierz transformacji wzorca. Wartość zwracana undefined.

Zobacz też:
canvas fillStyle - Kolor lub styl wypełnienia do wykorzystania wewnątrz kształtów, domyślny #000 czarny
canvas strokeStyle - Kolor lub styl linii obrysu wokół kształtów, domyślny #000 czarny
DOMMatrix -