javascript - fillrect - lienzo clearrect, con alfa

clear image canvas javascript

Question

Entonces sé que context.clearRect hace que los píxeles sean transparentes, pero me pregunto, ¿existe alguna función para hacer que los píxeles sean translúcidos?

Por ejemplo, supongamos que tengo un lienzo con estos colores (el cuarto en cada color es alfa):

#ffff #feef #abff
#5f6f #000f #ffff

Ejecutar clearRect se resolvería en esto (o algo así, simplemente haz que todos sean transparentes):

#fff0 #fee0 #abf0
#5f60 #0000 #fff0

Quiero eliminar la opacidad, pero no hacerla transparente (algo así como globalAlpha para clearRect ), para que pueda terminar así (digamos que configuré el equivalente globalAlpha a 0.5):

#fff8 #fee8 #abf8
#5f68 #0008 #fff8

es posible? ¿O sería más simple simplemente dibujar todo en un lienzo fuera de la pantalla, y luego dibujar ese lienzo (con el conjunto globalAlpha ) en una pantalla?

Avíseme si esto no está claro de ninguna manera.

Answer 1

Intenté resolver esto también, y decidí contar a través de los píxeles, configurando el canal alfa de cada uno de forma manual. Esto es un poco más trabajo, porque no puedo simplemente cubrir todo el lienzo con rect, pero está funcionando hasta ahora.

Hago esto para poder establecer una imagen de fondo para la página web y poner mi animación de lienzo sobre ella, sin tener que dibujar el fondo en el elemento canvas.

var oldArray = context.getImageData(0,0,canvas.width,canvas.height);
//count through only the alpha pixels
for(var d=3;d<oldArray.data.length;d+=4){
    //dim it with some feedback, I''m using .9
    oldArray.data[d] = Math.floor(oldArray.data[d]*.9);
}
sw.context.putImageData(oldArray,0,0);

Answer 2

La respuesta anterior hace el trabajo, sin embargo, getImageData es super lento y si tienes muchas otras cosas en juego, ralentizará tu animación inmensamente. Si crea un segundo elemento de lienzo fuera de pantalla, puede establecer su alfa global en .9 y mezclarlos de un lado a otro y obtener el mismo efecto con mucha mayor velocidad.

context2.clearRect(0,0,width,height);
context2.globalAlpha = .9;
context2.drawImage(canvas1,0,0);
context1.clearRect(0,0,width,height);
context1.drawImage(canvas2,0,0);
context1.the  rest of the drawing that you are doing goes here.