Immagine da utilizzare:
Esempio
Ripetere 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(); Prova tu stesso " Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| metodo | |||||
|---|---|---|---|---|---|
| createPattern() | sì | 9.0 | sì | sì | sì |
Definizione e utilizzo
Il createPattern() metodo ripete l'elemento specificato nella direzione specificata.
L'elemento può essere un'immagine, un video o un altro <canvas> elemento.
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
| Parametro | Descrizione | Gioca |
|---|---|---|
| image | Specifica l'immagine, tela, o elemento video del modello da utilizzare | |
| repeat | Predefinito. Il modello si ripete sia orizzontalmente che verticalmente | Gioca " |
| repeat-x | Lo schema si ripete solo orizzontalmente | Gioca " |
| repeat-y | Lo schema si ripete solo verticalmente | Gioca " |
| no-repeat | Verrà visualizzato il modello solo una volta (nessuna ripetizione) | Gioca " |