Helion Bestsellery

Prawdziwa głębia OSINT. Odkryj wartość danych Open Source Intelligence
  • Autor: Rae L. Baker
  • Zniżka: 40%
  • Cena: 99.00 59.40 zł
  • Marka: Helion
  • Status: Dostępna
  • Typ: Książka
  • EAN: 9788328905900
  • ISBN: 978-83-289-0590-0
Dodaj Prawdziwa głębia OSINT. Odkryj wartość danych Open Source Intelligence do koszyka

Helion Książka Dnia

Superinteligencja. Scenariusze, strategie, zagrożenia
  • Autor: Nick Bostrom
  • Zniżka: 50%
  • Cena: 69.00 34.50 zł
  • Marka: Helion
  • Status: Dostępna
  • Typ: Książka
  • EAN: 9788328903272
  • ISBN: 978-83-289-0327-2
Dodaj Superinteligencja. Scenariusze, strategie, zagrożenia do koszyka

createPattern()

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

 

 

 

 

 

Please publish modules in offcanvas position.