HTML canvas createPattern()Método
Objeto CanvasImagen utilizada:
Ejemplo
Repite la imagen en dirección 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();
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();
Pruébalo »
Soporte del navegador
Internet Explorer 9, Firefox, Opera, Chrome y Safari son compatibles con el método createPattern().
Nota:Internet Explorer 8 y versiones anteriores no son compatibles con el elemento <canvas>.
Definición y uso
El método createPattern() repite el elemento especificado en la dirección especificada.
El elemento puede ser una imagen, un video u otro elemento <canvas>.
El elemento repetido se puede usar para dibujar/rellenar rectángulos, círculos o líneas, etc.
| Sintaxis de JavaScript: | context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat"); |
|---|
Valores de parámetros
| Parámetro | Descripción | |
|---|---|---|
| image | Especifica la imagen, lienzo o elemento de video que se usará para el patrón. | |
| repeat | Predeterminado. El patrón se repite en dirección horizontal y vertical. | |
| repeat-x | El patrón solo se repite en dirección horizontal. | |
| repeat-y | El patrón solo se repite en dirección vertical. | |
| no-repeat | El patrón se muestra solo una vez (no se repite). |
Otras extensiones