Canvas createPattern() Méthode
Image à utiliser :
Exemple
Répétez une image à la fois horizontalement et verticalement :
JavaScript :
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = document.getElementById("lamp");
const pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill(); Description
La méthode createPattern() répète l'élément spécifié dans la direction choisie.
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 ou 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 | Description |
|---|---|
| image | Spécifie l'image, le canvas ou l'élément vidéo du motif à utiliser |
| repeat | Par défaut. Le motif se répète à la fois horizontalement et verticalement |
| repeat-x | Le motif se répète uniquement horizontalement |
| repeat-y | Le motif se répète uniquement verticalement |
| no-repeat | Le motif sera affiché une seule fois (pas de répétition) |
Support des navigateurs
L'élément <canvas> est une norme HTML5 (2014).
createPattern() est pris en charge dans tous les navigateurs modernes :
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Oui | Oui | Oui | Oui | Oui | 9-11 |