clearrect canvas, con alfa

Question

Quindi so che lo context.clearRect rende i pixel trasparenti, ma mi chiedo, esiste una funzione per rendere i pixel traslucidi?

Ad esempio, dire che ho una tela con questi colori (quarto in ogni colore è alfa):

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

Esecuzione clearRect risolverebbe in questo (o qualcosa del genere, solo fare loro tutto trasparente):

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

voglio rimuovere opacità, ma non renderla trasparente (un po 'come globalAlpha per clearRect), in modo che possa finire come questo (diciamo ho impostato il globalAlpha equivalente a 0,5):

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

È possibile? O sarebbe più semplice disegnare tutto su una tela fuori schermo, quindi disegnare quella tela (con il set globalAlpha) su uno schermo?

Fatemi sapere se questo non è chiaro in alcun modo.

Answer 1

Ho appena provato a capire anche questo, e ho deciso di contare attraverso i pixel, impostando manualmente il canale alfa di ciascuno. Questo è un po 'più di lavoro, perché non posso semplicemente coprire l'intera tela con un rect, ma funziona fino ad ora.

Lo sto facendo in modo che sia possibile impostare un'immagine di sfondo per la pagina Web e posizionare l'animazione su tela, senza dover disegnare lo sfondo nell'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 risposta di cui sopra ottiene il lavoro fatto, però getImageData è super lento e se avete un sacco di altre cose in corso sarà rallentare l'animazione immensamente. Se crei un secondo elemento canvas su schermo, puoi impostare il suo alfa globale su .9 e mischiarli avanti e indietro e ottenere lo stesso effetto con una velocità molto maggiore.

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.