Método createPattern() de HTML canvas
Definición y uso
createPattern() El método repite el elemento especificado en la dirección especificada.
Los elementos pueden ser imágenes, videos u otros elementos <canvas>.
Los elementos repetidos se pueden usar para dibujar/rellenar rectángulos, círculos o líneas, etc.
Ejemplo
Imágenes utilizadas:
Repetir la imagen en direcciones horizontal y vertical:
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();
Sintaxis
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
Valor del parámetro
| Parámetros | Descripción |
|---|---|
| image | Se especifica el elemento de imagen, lienzo o vídeo a usar. |
| repeat | Predeterminado. Este modo se repite en ambas direcciones, horizontal y vertical. |
| repeat-x | Este modo se repite solo en la dirección horizontal. |
| repeat-y | Este modo se repite solo en la dirección vertical. |
| no-repeat | Este modo se muestra solo una vez (sin repetir). |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite por primera vez esta propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
