Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


CANVAS (patrones de imagenes)





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>

<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.htmlya.com.ar/simulador/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>

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.htmlya.com.ar/simulador/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);
}








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9795
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados