Image à utiliser:
Exemple
Répéter une image à la fois horizontalement et verticalement:
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(); Essayez - le vous - même » support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| createPattern() | Oui | 9.0 | Oui | Oui | Oui |
Définition et utilisation
Le createPattern() méthode répète l'élément spécifié dans la direction indiquée.
L'élément peut être une image, une vidéo ou une autre <canvas> élément.
L'élément répété peut être utilisé pour dessiner / remplir des rectangles, des cercles, des lignes, etc.
| Syntaxe JavaScript: | context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); |
|---|
Paramètre valeurs
| Paramètre | La description | Joue-le |
|---|---|---|
| image | Indique l'image, toile, ou d'un élément vidéo du motif à utiliser | |
| repeat | Défaut. Le motif se répète à la fois horizontalement et verticalement | Joue-le " |
| repeat-x | Le motif se répète seulement horizontalement | Joue-le " |
| repeat-y | Le motif se répète seulement verticalement | Joue-le " |
| no-repeat | Le motif sera affiché qu'une seule fois (pas de répétition) | Joue-le " |