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

Obiekt CanvasPattern()

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

Metody CanvasPattern():

setTransform() - wykorzystuje DOMMatrix obiekt transformacji i wywołuje go na wzorcu

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

 };
 
 return;

 };

</script>

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

Opis:
Interfejs CanvasPattern reprezentuje nieprzezroczysty obiekt opisujący wzór na podstawie obrazu, płótna lub wideo utworzonego tą CanvasRenderingContext2D.createPattern() metodą. Może być używany jako fillStyle lub strokeStyle.

Linki:
canvas createPattern() - Tworzy powtarzający wzór obrazu, powtarza w kierunkach określonych. Zwraca CanvasPattern
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