Método HTML canvas createPattern()
Imagen a utilizar:
Ejemplo
Repetir una imagen tanto horizontal como verticalmente:
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();
Compatibilidad con navegador
Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.
| Method | |||||
|---|---|---|---|---|---|
| createPattern() | Yes | 9.0 | Yes | Yes | Yes |
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 utilizar para dibujar/rellenar rectángulos, círculos, líneas, etc.
| Sintaxis de JavaScript: | context .createPattern( image , "repetir|repetir-x|repetir-y|no-repetir"); |
|---|
Valores paramétricos
| Parameter | Description | Play it |
|---|---|---|
| image | Specifies the image, canvas, or video element of the pattern to use | |
| repeat | Default. The pattern repeats both horizontally and vertically | |
| repeat-x | The pattern repeats only horizontally | |
| repeat-y | The pattern repeats only vertically | |
| no-repeat | The pattern will be displayed only once (no repeat) |
❮ Referencia de lienzo HTML