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

CanvasRenderingContext2D.createPattern()

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

createPattern(image, repetition)

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 = "#eee";
 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 pattern = ctx.createPattern(img, "repeat");
 ctx.fillStyle = pattern;
 ctx.fillRect(0, 200, 600, 300);

 };
 
 document.body.appendChild(img);

 return;

 };

</script>

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

Opis:
Właściwość CanvasRenderingContext2D.createPattern() tworzy wzór przy użyciu określonego obrazu i powtórzenia. Ta metoda zwraca CanvasPattern. Ta metoda nie rysuje niczego bezpośrednio na płótnie. Tworzony przez niego wzór należy przypisać do właściwości fillStyle lub strokeStyle, po czym jest on stosowany do każdego kolejnego rysunku. Parametry image - obraz, który będzie używany jako obraz wzorca, może to być dowolny z poniższych: HTMLImageElement <img>, SVGImageElement <image>, HTMLVideoElement <video> korzystając z przechwytywania wideo, HTMLCanvasElement <canvas>, ImageBitmap, OffscreenCanvas, VideoFrame, repetition - ciąg wskazujący, jak powtórzyć obraz wzorca. Możliwe wartości to: "repeat" - oba kierunki, "repeat-x" - tylko poziomo, "repeat-y" - tylko pionowo, "no-repeat" - żaden kierunek. Jeśli repetition zostanie określony jako pusty ciąg znaków "" lub null, nie undefined, to zostanie użyta wartość "repeat". Wartość zwracana CanvasPattern nieprzezroczysty obiekt opisujący wzór. Jeśli image nie jest w pełni załadowany HTMLImageElement.complete jest false, to zwracany jest null.

Zobacz też:
fillStyle - Właściwość
strokeStyle - Właściwość
HTMLImageElement - <img>
SVGImageElement - <image>
HTMLVideoElement - <video> korzystając z przechwytywania wideo
HTMLCanvasElement - <canvas>
ImageBitmap - 
OffscreenCanvas - 
VideoFrame -