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

Imprimir Swing

Imprimir Swing

Java Printing nos permite hacer uso de las impresoras del sistema para, valga la redundancia 🙂 imprimir los gráficos de...

Client REST usando GSON y Volley

Client REST usando GSON y Volley

En este post crearemos un cliente android para consumir un recurso de un REST API utilizando las librerías GSON y Volley...

Conexion Access con PHP

Conexion Access con PHP

Para poder conectar PHP con una base de datos de microsoft Access debemos seguir los siguientes pasos: 1. Crea una base...

Control de versiones con GIT y Netbeans

Control de versiones con GIT y Netbeans

Control de versiones: Se llama control de versiones a la gestión de los diversos cambios que se realizan sobre los eleme...

Activar/Desactivar Bluetooth

Activar/Desactivar Bluetooth

En este tutorial crearemos una aplicación sencilla para activar y desactivar el bluetooth de nuestros teléfonos intelige...

Construye tu aplicación de mensajeria

Construye tu aplicación de mensajeria

En este post crearemos una aplicación sencilla para mandar mensajes de texto desde android. Necesitamos IDE: Eclipse + S...

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

Las herramientas Online son cada vez más comunes y pueden encontrarse herramientas para casi todo tipo de tareas, en est...

Apache POI es la API de Java para el trabajo con archivos de Microsoft como son Word, Excel y Power Point. Apache POI se...

Gallery.io es una herramienta de colaboración gratuita desarrollada por Google para cargar trabajos de diseño, obtener c...

Android cuenta con una serie de herramientas en su API para el trabajo con gráficos, entre estos podemos mencionar: Bitm...

Android Bolivia

MAUS