Aplicar efecto Canvas a varios elementos

[m3cubo]

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:

(function() {
         var supportsCanvas = !!document.createElement('canvas').getContext;
         supportsCanvas && (window.onload = greyImages);
 
         function greyImages() {
            var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'),
            img = document.getElementById('mycanvas'),
            imageData, px, length, i = 0,
            red, green, blue, grey;
 
            ctx.drawImage(img, 0, 0);
 
            imageData = ctx.getImageData(0, 0, 640, 400);
            px = imageData.data;
            length = px.length;
 
            for ( ; i < length; i+= 4 ) {
               // rgba
               grey = 0.3*px[i] + 0.59*px[i+1] + 0.11*px[i+2];
               px[i] = px[i+1] = px[i+2] = grey;
            }
 
            ctx.putImageData(imageData, 0, 0);
         }
      })();
 

Código HTML (Imágenes).

Código HTML:

/*Esta imagen recibe el efecto*/
 
<img src="imagen1.png" class="icono" id="mycanvas" /> 
<canvas width=50 height=50></canvas> 
 
/*Esta imagen no recibe el efecto*/
 
<img src="imagen2.png" class="icono" id="mycanvas" /> 
<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!

[Carlangueitor]

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

Saludos

[ryugen]

Iniciado por Carlangueitor

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

[m3cubo]

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.

[ryugen]

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.

[Carlangueitor]

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

[m3cubo]

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!

[m3cubo]

¿Alguien ha solucionado el código o sabe como hacer para aplicar el mismo efecto canvas a varios elementos? Gracias.

[Carlangueitor]

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

Saludos

[memoadian]

a lo mejor si usas JCanvas se te facilita el trabajo. No he trabajado mucho con canvas.

[m3cubo]

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.

[ryugen]

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.