Metodo HTML canvas createPattern()

Immagine da utilizzare:

Lampada

Esempio

Ripeti un'immagine sia orizzontalmente che verticalmente:

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();

Supporto del browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente il metodo.

Method
createPattern()	Yes	9.0	Yes	Yes	Yes

Definizione e utilizzo

Il metodo createPattern() ripete l'elemento specificato nella direzione specificata.

L'elemento può essere un'immagine, un video o un altro elemento <canvas>.

L'elemento ripetuto può essere utilizzato per disegnare/riempire rettangoli, cerchi, linee, ecc.

sintassi JavaScript:	context .createPattern( image ,"repeat\|repeat-x\|repeat-y\|no-repeat");

Valori dei parametri

Parameter	Description	Play it
image	Specifies the image, canvas, or video element of the pattern to use
repeat	Default. The pattern repeats both horizontally and vertically
repeat-x	The pattern repeats only horizontally
repeat-y	The pattern repeats only vertically
no-repeat	The pattern will be displayed only once (no repeat)

❮ Riferimento tela HTML