Méthode createPattern() du canvas HTML
Définition et utilisation
createPattern() La méthode répète l'élément spécifié dans la direction spécifiée.
Les éléments peuvent être des images, des vidéos ou d'autres éléments <canvas>.
Les éléments répétés peuvent être utilisés pour dessiner ou remplir des rectangles, des cercles ou des lignes, etc.
Exemple
Images utilisées :
Répéter l'image dans les directions horizontale et verticale :
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();
Syntaxe
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
Valeur du paramètre
| Paramètres | Description |
|---|---|
| image | Définir l'élément d'image, de canvas ou de vidéo à utiliser. |
| repeat | Par défaut. Ce mode se répète dans les directions horizontale et verticale. |
| repeat-x | Ce mode ne se répète qu'horizontalement. |
| repeat-y | Ce mode ne se répète qu'horizontalement. |
| no-repeat | Ce mode n'est affiché qu'une seule fois (sans répétition). |
Prise en charge du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
