Immagine da usare:
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 browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| createPattern() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definizione e l'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 / riempimento rettangoli, cerchi, linee etc.
| sintassi JavaScript: | context . createPattern( image ,"repeat|repeat-x|repeat-y|no-repeat") ; |
|---|
valori dei parametri
| Parametro | Descrizione | Gioca |
|---|---|---|
| image | Specifica dell'immagine, tela, o elemento video del modello da utilizzare | |
| ripetere | Predefinito. Il modello si ripete sia orizzontalmente che verticalmente | Gioca " |
| repeat-x | Il modello si ripete solo orizzontalmente | Gioca " |
| repeat-y | Lo schema si ripete solo verticalmente | Gioca " |
| no-repeat | Verrà visualizzato il modello solo una volta (no repeat) | Gioca " |
<Oggetto Tela