Canvas createPattern() méthode
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
Image utilisée :
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ètre | Description |
|---|---|
| image | Définir l'image, le canvas ou l'élément vidéo à utiliser. |
| repeat | Par défaut. Ce modèle se répète dans les directions horizontale et verticale. |
| repeat-x | Ce modèle ne se répète que dans la direction horizontale. |
| repeat-y | Ce mode répète uniquement dans la direction verticale. |
| no-repeat | Ce mode s'affiche une seule fois (sans répétition). |
Support 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>.
