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

Node.js: Instalación, configuración y Hola Mundo

Node.js: Instalación, configuración y Hola Mundo

No se puede negar la popularidad que ganaron las aplicaciones de JavaScript en los últimos años, y las bibliotecas dispo...

Plantilla android de aviso de página en construcción

Plantilla android de aviso de página en construcción

Cuando tenemos dominio web pero aun no tenemos el contenido listo es común colocar en su lugar una simple web de aviso q...

Conectar java con Firebird

Conectar java con Firebird

En este tutorial veremos la forma de conectarse a una base de datos de Firebird utilizando el lenguaje Java y el IDE Net...

Dibujando con Canvas

Dibujando con Canvas

La clase Canvas (Lienzo)  de Android es una superficie que nos permite pintar figuras, texto e imágenes utilizando para...

Personalización de Componentes Swing Java I

Personalización de Componentes Swing Java I

Hace tiempo pidieron un video tutorial sobre como crear sus propios componentes swing java, lamentablemente debo decir q...

Impresión de reportes

Impresión de reportes

Existen diferentes métodos par imprimir reportes hechos con JasperReport en aplicaciones hechas en java, en este post te...

Comparte lo que sabes

Categorias

Últimas entradas

En la convención de Chain React  en Portland (Oregon), Marc Horowitz ingeniero de software en Facebook presentó el motor...

En un post anterior [Introducción a VueJS framework para el desarrollo FrontEnd] realizamos una breve introducción a Vue...

La programación y la electrónica están a la orden del día. Cada vez son más importantes y prácticamente forman parte de...

Vue.js es un framework progresivo para la creación de interfaces de usuario de una sola página creado por Evan You. Pero...

Android Bolivia

MAUS