Méthode createPattern()du canvas HTML
Manuel de référence HTML canvas
Image utilisée :
Exemple
Répéter l'image dans les deux 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();
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 »
Prise en charge des navigateurs
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode createPattern().
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
Définition et utilisation
La méthode createPattern() répète l'élément spécifié dans une direction spécifiée.
L'élément peut être une image, une vidéo ou un autre élément <canvas>.
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"); |
|---|
Valeurs des paramètres
| Paramètre | Description | |
|---|---|---|
| image | Spécifie l'image, le canvas ou l'élément vidéo à utiliser comme motif. | |
| repeat | Par défaut. Le motif est répété dans les deux directions, horizontale et verticale. | |
| repeat-x | Le motif est répété uniquement dans la direction horizontale. | |
| repeat-y | Le motif est répété uniquement dans la direction verticale. | |
| no-repeat | Le motif n'est affiché qu'une seule fois (aucune répétition). |
Manuel de référence HTML canvas Autres extensions