Foros del Web » Creando para Internet » HTML »

Aplicar efecto Canvas a varios elementos

Estas en el tema de Aplicar efecto Canvas a varios elementos en el foro de HTML en Foros del Web. Saludos a todos, tengo unos iconos a los que quiero aplicar un efecto Canvas, en el que estos tengan una tonalidad grisácea y al pasar ...
  #1 (permalink)  
Antiguo 05/10/2012, 10:32
m3cubo
Invitado
 
Mensajes: n/a
Puntos:
Aplicar efecto Canvas a varios elementos

Saludos a todos,

tengo unos iconos a los que quiero aplicar un efecto Canvas, en el que estos tengan una tonalidad grisácea y al pasar el cursor por ellos se iluminen (es decir, vuelva a su color original).

Me funciona para que una imagen reciba el efecto, pero mi pregunta es, ¿se puede aplicar un efecto Canvas a varios elementos, como si fuese una clase CSS?
¿Cómo puedo hacerlo?

Este es el código:

Función Javascript para el Canvas:

Código Javascript:
Ver original
  1. (function() {
  2.          var supportsCanvas = !!document.createElement('canvas').getContext;
  3.          supportsCanvas && (window.onload = greyImages);
  4.  
  5.          function greyImages() {
  6.             var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
  7.             img = document.getElementById('mycanvas'),
  8.             imageData, px, length, i = 0,
  9.             red, green, blue, grey;
  10.  
  11.             ctx.drawImage(img, 0, 0);
  12.  
  13.             imageData = ctx.getImageData(0, 0, 640, 400);
  14.             px = imageData.data;
  15.             length = px.length;
  16.  
  17.             for ( ; i < length; i+= 4 ) {
  18.                // rgba
  19.                grey = 0.3*px[i] + 0.59*px[i+1] + 0.11*px[i+2];
  20.                px[i] = px[i+1] = px[i+2] = grey;
  21.             }
  22.  
  23.             ctx.putImageData(imageData, 0, 0);
  24.          }
  25.       })();


Código HTML (Imágenes).

Código HTML:
Ver original
  1. /*Esta imagen recibe el efecto*/
  2.  
  3. <img src="imagen1.png" class="icono" id="mycanvas" />
  4. <canvas width=50 height=50></canvas>
  5.  
  6. /*Esta imagen no recibe el efecto*/
  7.  
  8. <img src="imagen2.png" class="icono" id="mycanvas" />
  9. <canvas width=50 height=50></canvas>


Me he puesto a toquetear el Javascript, pero nada. También he buscado, pero no he encontrado nada parecido. Tengo poca experiencia con Canvas, pero supongo que lo que quiero hacer es perfectamente factible.


Saludos!
  #2 (permalink)  
Antiguo 05/10/2012, 12:07
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: Aplicar efecto Canvas a varios elementos

Y por que no usas CSS filters: http://html5-demos.appspot.com/stati...ers/index.html ?

Saludos
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 05/10/2012, 12:18
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 6 meses
Puntos: 187
Respuesta: Aplicar efecto Canvas a varios elementos

Cita:
Iniciado por Carlangueitor Ver Mensaje
Y por que no usas CSS filters: http://html5-demos.appspot.com/stati...ers/index.html ?

Saludos
Imagino porque son unicamente compatibles con Webkit

http://caniuse.com/#feat=css-filters
  #4 (permalink)  
Antiguo 05/10/2012, 12:38
m3cubo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Aplicar efecto Canvas a varios elementos

Hola Carlangueitor, gracias por el consejo. Había probado los filtros, pero como dice ryugen no son compatibles con el resto de navegadores, y prefiero el efecto de Canvas.

Supongo que será cuestión de aplicar en la función Javascript lo necesario para que se aplique a varias imágenes, todas las que tengan la misma clase, etc. pero los ejemplos que he encontrado sólo lo aplican a una imagen, y no domino lo sufiente Javascript.

Saludos, y gracias a todos.
  #5 (permalink)  
Antiguo 05/10/2012, 12:46
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 6 meses
Puntos: 187
Respuesta: Aplicar efecto Canvas a varios elementos

m3cubo puedes subir un mini ejemplo a http://jsfiddle.net/ por ejemplo, para que veamos el codigo en funcionamiento y podamos tocarlo un poco para poder darte una ayuda.
  #6 (permalink)  
Antiguo 05/10/2012, 12:56
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: Aplicar efecto Canvas a varios elementos

Cierto, error mío

Como sea igual y te sirve este código que hice hace tiempo: https://github.com/Carlangueitor/OpcityMap.js es básicamente lo mismo, lo que yo lo aplico en un nuevo div.

Saludos
__________________
Grupo Telegram Docker en Español
  #7 (permalink)  
Antiguo 05/10/2012, 13:22
m3cubo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Aplicar efecto Canvas a varios elementos

Hola ryugen, he subido el archivo con el mismo código que uso:

http://jsfiddle.net/37BUa/

He subido dos imágenes, puede verse que parece que ninguna cambia al pasar el cursor encima (es extraño, ya que cuando lo pruebo en mi ordenador si está oscurecida) sin embargo, cambia un poco la sombra de la primera (que quiere decir que se aplica correctamente el Canvas en la primera imagen).
Es decir, habría que conseguir que cambiase para ambas, y en mi ordenador se verá luego bien.

Carlengueitor, me he bajado el archivo, voy a ver qué tal.

Saludos!
  #8 (permalink)  
Antiguo 07/10/2012, 05:42
m3cubo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Aplicar efecto Canvas a varios elementos

¿Alguien ha solucionado el código o sabe como hacer para aplicar el mismo efecto canvas a varios elementos? Gracias.
  #9 (permalink)  
Antiguo 07/10/2012, 13:08
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: Aplicar efecto Canvas a varios elementos

Ni viste mi código? No uso el mismo efecto, pero creo que puedes ver como hago esa parte.

Saludos
__________________
Grupo Telegram Docker en Español
  #10 (permalink)  
Antiguo 07/10/2012, 15:13
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 9 meses
Puntos: 641
Respuesta: Aplicar efecto Canvas a varios elementos

a lo mejor si usas JCanvas se te facilita el trabajo. No he trabajado mucho con canvas.
  #11 (permalink)  
Antiguo 09/10/2012, 09:40
m3cubo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Aplicar efecto Canvas a varios elementos

Hola Carlangueitor, vi tu código, lo descargué y lo probé, pero no es lo que me hace falta.
En tu código generas distintas funciones para aplicar efectos distintos.

Yo quiero aplicar el mismo efecto a todos los elementos canvas que haya en la página.
Prácticamente, sería cuestión de conocer bien Javascript, así que puedo postear allí la duda.
La he posteado aquí porque el efecto era con Canvas, pero lo que habría que cambiar sería Javascript.

Habría que conseguir que Javascript detectase todos los elementos canvas, o los que tuviesen una determinada id, y aplicarles el mismo efecto. No conozco lo suficiente Javascript para saber como puede aplicarse esto. ¿Alguien lo sabe?

Saludos.
  #12 (permalink)  
Antiguo 09/10/2012, 11:00
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 15 años, 6 meses
Puntos: 187
Respuesta: Aplicar efecto Canvas a varios elementos

Acá hay un script en jQuery que hace lo que vos estás buscando: aplicar un determinado efecto a más de un elemento (en este caso una galería de imagenes y es pasar la imagen a escala de grises).
http://webdesignerwall.com/tutorials...le-image-hover

Si llevar a escala de grises no era tu objetivo, puede modificar la funcion grayscale para hacerla aplicar el efecto que estes buscando.

Etiquetas: canvas, css, efecto, elementos, javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:24.