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

Personalizar JTabbedPane con Netbeans

Personalizar JTabbedPane con Netbeans

Crear una librería swing para java utilizando Netbeans no es nada del otro mundo y la cantidad de código que vayamos a e...

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...

Uso de Tiles para crear fondo para aplicaciones

Uso de Tiles para crear fondo para aplicaciones

Un Tile o azulejo, es una parte seccionada de una imagen, por ejemplo la imagen de abajo (chica anime) esta dividida en...

Hola Bolivia con LibGDX

Hola Bolivia con LibGDX

¿Que es LibGDX? LibGDX es un framework escrito en java y C/C++  para el desarrollo de videojuegos, es multiplataforma (W...

Crea un Themes WordPress con Netbeans – Configuracion

Crea un Themes WordPress con Netbeans – Configuracion

Este post te enseña una manera que tengo de configurar Netbeans para crear y ejecutar un proyecto php utilizando el CMS...

Arrastrar y abrir archivo Excel

Arrastrar y abrir archivo Excel

En este post, crearemos una aplicación java que nos permita arrastrar un archivo excel hacia la aplicación, abrirlo y ca...

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

Existen varias aplicaciones (free y de pago) que emulan una impresora virtual para generar archivos en PDF  (Portable Do...

En este post construiremos paso a paso un SharedPreferences más conocido en español como “Preferencias de Usuario...

La Inteligencia Artificial (AI – Artificial Intelligence) estará presente en casi cada aspecto de nuestra vida en...

Una Interface Funcional es una interface que contiene uno y solo un método abstracto aunque puede contener métodos por d...

Android Bolivia

Bandera en Alto