Cuando se pinta el interior de una figura hemos visto que podemos utilizar como relleno un color fijo, un gradiente, ahora veremos como podemos utilizar una imagen.
Para utilizar como relleno una imagen debemos crear un objeto de tipo CanvasPattern empleando el método createPattern:
CanvasPattern createPattern(Object Image, string repetición)
Es decir que pasamos como parámetro un objeto de tipo Image y un string que puede tomar alguno de estos valores:
"repeat" Se repite la imagen en x y en y completando toda la figura. "no-repeat" Si la figura es mayor a la imagen luego queda vacío parte de la imagen. "repeat-x" Se repite en x "repeat-y" Se repite en y
Crearemos un ejemplo donde graficaremos un cuadrado de 600*600 píxeles y pintaremos su interior utilizando una imagen:
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
img1 = new Image();
img1.src = 'http://www.tutorialesprogramacionya.com/imagenes/foto1.jpg';
img1.onload = function(){
var patron = lienzo.createPattern(img1,'repeat');
lienzo.fillStyle = patron;
lienzo.fillRect(0,0,600,600);
}
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
El resultado en el navegador al cargar esta página es:
Creamos un objeto de tipo Image e inicializamos la propiedad src con la imagen propiamente dicha:
if (lienzo) {
img1 = new Image();
img1.src = 'http://www.tutorialesprogramacionya.com/imagenes/foto1.jpg';
Cuando se termina de cargar por completo la imagen procedemos a crear el patrón y dibujar el rectángulo inicializando la propiedad fillStyle con el patrón creado:
img1.onload = function(){
var patron = lienzo.createPattern(img1,'repeat');
lienzo.fillStyle = patron;
lienzo.fillRect(0,0,600,600);
}