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

Material Design: Paleta de Colores

Material Design: Paleta de Colores

«Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas plataformas y...

Aprende a usar transacciones con Laravel

Aprende a usar transacciones con Laravel

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

Añadir código QR a reportes con iReport

Añadir código QR a reportes con iReport

En un post anterior se vio como agregar un código DataMatrix en reportes con iReport Designer sin embargo actualmente el...

UML Java: easyUML plugins para Netbeans

UML Java: easyUML plugins para Netbeans

easyUML es una herramienta para crear diagramas UML para NetBeans de forma visual. Adecuado para el aprendizaje de este...

Crear ventana de ayuda sin JavaHelp

Crear ventana de ayuda sin JavaHelp

Java Help es (o era) una librería para java que permitía añadir ventanas de ayuda HTML a nuestros proyectos, al ser una...

Reporte Padrón electoral con imágenes y Data Matrix

Reporte Padrón electoral con imágenes y Data Matrix

En este post diseñaremos un reporte de un padrón electoral con dos columnas que contendrá los certificados de sufragio e...

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp