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 vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge pleinement la méthode.
| méthode | |||||
|---|---|---|---|---|---|
| createPattern() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Le createPattern() méthode répète l'élément spécifié dans la direction spécifié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 / remplissage des rectangles, des cercles, des lignes, etc.
| syntaxe JavaScript: | context . createPattern( image ,"repeat|repeat-x|repeat-y|no-repeat") ; |
|---|
Les valeurs des paramètres
| Paramètre | La description | Joue-le |
|---|---|---|
| image | Spécifie l'image, la toile, ou de l'élément vidéo du motif à utiliser | |
| répéter | Défaut. Le motif se répète à la fois horizontalement et verticalement | Joue-le " |
| repeat-x | Le motif se répète uniquement horizontalement | Joue-le " |
| répéter-y | Le motif se répète uniquement verticalement | Joue-le " |
| no-repeat | Le modèle sera affiché qu'une seule fois (no repeat) de (no repeat) | Joue-le " |
<Canvas objet