Método Canvas createPattern()
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 o rellenar rectángulos, círculos o líneas, etc.
Ejemplo
Imágenes utilizadas:
Repetir la imagen en ambas 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ámetro | Descripción |
|---|---|
| image | Se especifica la imagen, lienzo o elemento de video a usar. |
| repeat | Predeterminado. Este patrón se repite en ambas direcciones, horizontal y vertical. |
| repeat-x | Este patrón 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 una vez (sin repetir). |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad por primera vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
