Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas avanzado

Crea tus propios dibujos y animaciones con Canvas en HTML5


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 144

Visitas el mes pasado: 223

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Tutorial de Canvas
mozilla.org
HTML5
htmlya
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard
HTML Canvas 2D Context
W3C Working Draft 24 May 2011
HTML - Living Standard
whatwg.org

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Canvas avanzado (II)

Relleno de figuras.

imagen canvas

Rellenar con imágenes

Una vez que hemos creado una figura con canvas tenemos la posibilidad de rellenarla con imágenes o con otro canvas. La imagen se comporta como una imagen de fondo, pero se verá sólo dentro de la figura o figuras a las que afecte el método utilizado para esto. Este es el método createPattern():

relleno=cxt.createPattern(<imagen>,<valor>);

El primer parámetro del método es el objeto imagen javascript que queremos utilizar de relleno.

El segundo parámetro será un valor que indica si la imagen se repite o no. Sus valores son los mismos que para la propiedad CSS background-repeat y tienen el mismo significado: repeat | no-repeat | repeat-x | repeat-y.

El resultado se guarda en una variable, ya que ésta se utilizará como valor de la propiedad fillStyle:

fillStyle=relleno

Por último recordar que el código tiene que ejecutarse después de que se haya cargado la imagen por lo que todo él irá dentro de la función:

imagen.onload=function() { .../*código anterior*/ ... }


Ejemplo de relleno con imagen

Creamos un canvas, y dentro de él una especie de ventanas. Por las ventanas se asomará la imagen de "paisaje de nieve" que hemos utilizado en la página anterior. Empezamos por el código HTML:

<canvas id="ejemplo1" width="360" height="270">
</canvas>

Ahora en el código javascript creamos un nuevo objeto de imagen, tras cargarse la imagen aplicamos en canvas el método createPattern() y dibujamos las figuras a las que afecta este método.

cxt1=iniciaCanvas("ejemplo1"); 
if (cxt1) {
cxt1.beginPath();
imagen1=new Image(); //iniciar ruta
imagen1.src="objetos/nieve.jpg"; //nuevo objeto imagen
imagen1.onload=function() { //la imagen debe cargarse
    relleno=cxt1.createPattern(imagen1,"repeat"); //método createPattern
    cxt1.fillStyle=relleno; //imagen como relleno
    x=30; //posición inicial de ventanas.
    y=25;
    cxt1.strokeStyle="maroon"; //estilo línea ventanas
    cxt1.lineWidth=3 //grosor línea ventanas
      for (i=1;i<=5;i++) { //bucles para crear ventanas.
        for (j=1;j<=5;j++) {
          cxt1.strokeRect(x,y,55,40); //contorno ventana
          cxt1.fillRect(x,y,55,40); //relleno ventana
          x+=60; //posicion x para ventana siguiente
        }
        y+=45; //posición y para ventana siguiente
        x=30; //posición x inicio nueva línea.
      }
    }									
}

El resultado de estos códigos es el canvas que vemos aquí a la derecha.

Todo el código lo hemos puesto dentro de la función que se inicia tras cargarse la imagen. Esto es así porque la imagen tiene que estar ya cargada para que pueda formar parte del relleno de los cuadrados.

para crear las ventanas hemos hecho dos bucles anidados que nos facilitan el trabajo, esto es una tarea habitual en javascript, ya que si no tendríamos que haber creado las ventanas una por una.


Rellenar con otro canvas

También podemos rellenar las figuras hechas en un canvas con otra figura hecha en otro canvas. El primer canvas que tenemos que hacer será el de la figura de relleno, y el segundo el de las figuras que se rellenarán con este.

Para ello utilizamos también el método createPattern() de la siguiente manera:

relleno=createPattern(cxt1.canvas,"repeat");

cxt2.fillStyle=relleno;

Lo único que cambia es la forma de llamar en el primer parámetro al canvas. En este ejemplo cxt1 es el contexto del primer canvas, el de la imagen de relleno, y cxt2 el contexto del segundo canvas, donde se inserta el primer canvas.

En el primer parámetro debemos poner el contexto seguido de .canvas. El primer canvas debe tener ya el dibujo, por lo que tenemos que escribirlo antes en el código. Por otra parte no hace falta llamar a ninguna función de carga de imágenes, ya que se supone que el canvas al que llamamos en el método está ya cargado.


Ejemplo de relleno con otro canvas.

Empezamos creando un canvas que tendrá el dibujo para el relleno. Este es el código HTML:

<canvas id="imgRelleno" width="50" height="50">
</canvas>

Y ahora hacemos el dibujo del canvas con el código javascript:

cxt2=iniciaCanvas("imgRelleno");
if (cxt2) {
cxt2.beginPath(); //iniciar ruta
cxt2.fillStyle="aqua"; // color relleno
cxt2.fillRect(0,0,50,50); // rectángulo 
cxt2.strokeStyle="red" //color líneas
cxt2.lineWidth=3; //ancho líneas
cxt2.moveTo(0,25); //lineas perpendiculares centradas
cxt2.lineTo(50,25);
cxt2.moveTo(25,0);
cxt2.lineTo(25,50);
cxt2.fill()
cxt2.fillStyle="yellow"; //cambio color de relleno
cxt2.moveTo(25,40) //dibujar un círculo central.
cxt2.arc(25,25,15,0,2*Math.PI);
cxt2.stroke()
cxt2.fill()
}

Este canvas nos da como resultado el dibujo del pequeño cuadrado que vemos aquí a la derecha. Este dibujo repetido es el que emplearemos como fondo para otros dibujos en un canvas más grande.

Ahora hacemos el segundo canvas, en el cual insertaremos como relleno de las figuras el dibujo del primer canvas. Empezamos por el código HTML:

<canvas id="ejemplo2" width="200" height="260">
</canvas>

Después seguimos con el código javascript en el cual incorporamos el canvas anterior como relleno para las figuras de este canvas, utilizando el método createPattern().

cxt3=iniciaCanvas("ejemplo2");
if (cxt3) {
cxt3.beginPath();//iniciar ruta
relleno2=cxt3.createPattern(cxt2.canvas,"repeat"); //relleno con canvas anterior
cxt3.fillStyle=relleno2; 
cxt3.strokeStyle="green"; //color de línea
cxt3.lineWidth=3; //grosor de línea
cxt3.arc(100,100,80,0,Math.PI,true); //círculo superior
cxt3.closePath()
cxt3.fillRect(20,110,160,40); //rectángulo central
cxt3.strokeRect(20,110,160,40);
cxt3.moveTo(18,160); //círculo inferior
cxt3.arc(100,160,80,0,Math.PI,false);
cxt3.stroke()
cxt3.fill()
}

El resultado del código anterior lo vemos aquí a la derecha.

Al contrario que con las imágenes aquí no necesitamos llamar a la función de carga de imagenes, ya que el canvas está ya cargado cuando se inicia el segundo canvas.






En la siguiente página veremos los conceptos de salvar y restaurar.

Salvar y restaurar



Canvas (avanzado)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com