Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Shapes y evento click de jquery

Shapes y evento click de jquery

Autor jc mouse martes, noviembre 13, 2012

En este tutorial crearemos shapes en tiempo de ejecución y ademas les daremos un poco de movimiento. Para realizar correctamente este tutorial, es lectura obligatoria visitar el anterior post donde se enseño a crear los shapes [Primitivas en HTML5], se hará uso del mismo código con pequeñas modificaciones.

animate html5

Comencemos.

1. El archivo principal html, se deja como esta.

2. En el archivo shapes.js se realizaran los siguientes cambios.

2.1 Se eliminara la función init(). Recordemos que esta función nos creaba los shapes antes de pintarlos.

2.2 En  lugar  de la función init(), se declara otra función, create( x,y ), esta nueva función como su nombre indica, “crea” una nueva figura al azar de las tres disponibles y la coloca en el array shapes[].

la función create(x,y) recibe dos parámetros de entrada, las coordenadas X,Y de la posición donde se realiza un clic sobre el canvas.

function create( x , y )
{
 var width = canvas.width;
    var height = canvas.height;
 var w = Math.random()*100;
    var h = Math.random()*100;  
    var r = Math.random()*40;
 //numero aleatorio
 var value = Math.random()*100;
 if( value < 40 ) //crea un circulo
   shapes.push( new Circle(x,y,r) );
 else if( value <80 ) //crea un rectangulo
   shapes.push( new Rectangle( x, y, w, h) );  
 else // crea el logo de html5
   shapes.push( new html5( x, y ) );   
}

2.3 Modificaremos también la función paint(), esta función es la que nos pinta los shapes en el canvas.

Original:

function paint() { 
 for (var i=0; i<shapes.length; i++) 
 {  
  switch ( shapes[i].name  ) 
  {
    case 'Rectangle': 
             drawRectangle(ctx, shapes[i].x, shapes[i].y,  shapes[i].w , shapes[i].h );
       break;
    case 'Circle':
      drawCircle(ctx, shapes[i].x, shapes[i].y, shapes[i].radius );  
      break;
    case  'html5':
      drawhtml5(ctx, shapes[i].x, shapes[i].y );  
      break;
  } 
    }
}

Después de agregar código nuevo:

01 function paint() { 
02     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);    
03  for (var i=0; i<shapes.length; i++) 
04  {  
05    var n = Math.random()*10;
06   switch ( shapes[i].name  ) 
07   {
08     case 'Rectangle': 
09              drawRectangle(ctx, shapes[i].x + n, shapes[i].y + n,  shapes[i].w + n , shapes[i].h + n );
10        break;
11     case 'Circle':
12       drawCircle(ctx, shapes[i].x + n, shapes[i].y + n, shapes[i].radius + n );  
13       break;
14     case  'html5':
15       drawhtml5(ctx, shapes[i].x, shapes[i].y );  
16       break;
17   } 
18     }
19 }

Aquí lo importante, en la linea dos vemos una nueva instrucción, clearRect, esta función nos permite limpiar (clear) o borrar una parte rectangular del canvas, esta función tiene 4 parámetros  (x,y, Ancho, Alto ), las dos primeras (X,Y) son las coordenadas de la esquina superior izquierda y esta por demás explicar lo que hace el Ancho y Alto 🙂

En la linea 05, se añade un generador de números al azar  de 1 a 10 y se guarda en la variable “n”, esta variable “n” se añade en los parámetros de entrada de drawRectangledrawCircle, esto para que las figuras al momento de crearse una y otra vez, tenga diferente tamaño.

¿Porque es importante limpiar el canvas con clearRect?

Si nuestra figura fuera estática, no importaría, ya que los shapes se pintan una sola vez cada que se recarga la página, pero, como nosotros haremos que las figuras se pinten cada cierto tiempo con tamaños diferentes, las shapes se superpondrían una y otra vez deformando nuestra imagen.

feo

2.4 Para terminar reescribiéremos nuestra función jquery:

01 $(function(){
02 ...
03 });

Implementamos la función click de jquery sobre el canvas, cada que se realiza un clic sobre el lienzo, se llama a la función create(x,y) para crear una nueva figura en las coordenadas x, y del mouse.

También se hace uso del método setInterval para llamar a la función de pintado paint() cada cierto tiempo, el tiempo esta especificado en milisegundos.

01 $(function(){     
02     canvas = document.getElementById('canvas');
03     ctx = canvas.getContext('2d');
04  //cuando se realice un clic sobre el canvas se crea una figura al azar con las coordenas X,Y del mouse 
05  $('#canvas').click(function(e) { 
06   create(  e.pageX  , e.pageY  );
07     }); 
08  //todo el lienzo se repinta cada cierto tiempo
09   setInterval(paint, 100); 
10 });

y fin 🙂

animate html5

Archivos de ejemplo

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Introducción a MariaDB con Java

Introducción a MariaDB con Java

Maria DB  es un sistema de gestión de bases de datos derivado de MySQL con licencia GPL, pero con un rendimiento similar...

Actualizar JComboBox al cambiar valor de otro JComboBox

Actualizar JComboBox al cambiar valor de otro JComboBox

Cuando se trabaja con base de datos, estos datos son dinámicos, cambian con el tiempo y es necesario que esos cambios se...

TextView Autocompletado

TextView Autocompletado

Un TextView autocompletado nos facilita el ingreso de información en aplicaciones móviles ya que te muestra posibles opc...

Creación y uso de parametros en Jaspersoft Studio

Creación y uso de parametros en Jaspersoft Studio

Hola 🙂 En este video tutorial veremos como crear y usar parámetros en reportes con JasperSoft Studio, la base de datos q...

Crear ayuda HTML para programa con JavaFX Swing

Crear ayuda HTML para programa con JavaFX Swing

En este post veremos como crear una aplicación de ayuda al usuario similar al extinto javahelp. Pero en esta oportunidad...

Bloquear pantalla cliente

Bloquear pantalla cliente

En este tutorial crearemos una aplicación que bloqueara toda la pantalla de la PC y no nos dejara realizar ninguna tarea...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

PHPUnit es un framework que se utiliza para escribir tests en PHP, Netbeans nos permite configurarlo y usarlo fácilmente...

Una Prueba Unitaria, es una forma de comprobar que nuestro código, hace lo que se supone debe hacer; es decir, se asegur...

La prueba del camino básico, es una prueba de “caja blanca” que consiste en verificar el código de nuestros...

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Android Bolivia

Bandera en Alto