Actualmente estoy trabajando en un generador de imágenes aleatorias, que combina diferentes archivos .png (atributos) en una sola imagen. Me las arreglé para que funcionen, sin embargo, hay una parte que quiero para mi proyecto que no he podido averiguar cómo hacer.

Me doy cuenta de que hay formas de hacer esto en CSS y HTML, sin embargo, ninguno de estos es suficiente para lo que necesito. El carácter se genera en la parte de JavaScript de mi código y, por lo tanto, para que funcione, necesito JavaScript.

Aquí hay un ejemplo de una pieza de código en JavaScript que genera una de las partes del cuerpo. En este caso, es el cuerpo.

 //body var characterbody = new Image(); var characterbodynum=Math.floor(Math.random()*4)+1; var characterbodyname="body" + characterbodynum + ".png"; characterbody.src=characterbodyname;

Para explicar este código: La primera línea indica una imagen. La segunda línea le indica a la computadora que hay cuatro imágenes, y una debe seleccionarse al azar. La tercera línea indica, según los archivos guardados en mi computadora, que necesita encontrar un archivo llamado "cuerpo", seguido de un número y luego .png al final. Por ejemplo, si el número entero aleatorio entre 1 y 4 elige el número 3, elige body3.png y coloca ese archivo .png en la imagen general.

Lo que quiero ahora es agregar una superposición que seleccionará aleatoriamente un valor de tono y cambiará el tono de la imagen en esa cantidad. Preferiblemente, me gustaría que funcione como el código anterior para que sea fácil de implementar en mi código.

Supongo, pero podría estar equivocado, ¿es style.filter el código correcto para usar para hacer esto?