płótno jasne, z alfa

Question

Więc wiem, że context.clearRect sprawia, że ​​piksele są przezroczyste, ale zastanawiam się, czy istnieje funkcja, która sprawia, że ​​piksele są półprzezroczyste?

Na przykład, że mam płótno z tych kolorów (czwarta po jednym w każdym kolorze jest alfa):

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

Running clearRect by rozwiązać w ten (lub coś, po prostu zrobić je wszystkie przezroczyste):

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

Chcę usunąć przezroczystość, ale nie sprawiają, że przezroczyste (trochę jak globalAlpha dla clearRect), tak, że może skończyć się tak (powiedzmy ustawić globalAlpha równowartość 0,5):

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

Czy to możliwe? A może prostsze byłoby narysowanie wszystkiego na płótnie poza ekranem, a następnie narysowanie tego płótna (z zestawem globalAlpha) na ekranie?

Daj mi znać, jeśli nie jest to w żaden sposób jasne.

Answer 1

Po prostu próbowałem to sobie wyobrazić i postanowiłem zliczyć piksele, ustawiając kanał alfa każdego z nich ręcznie. To trochę więcej pracy, ponieważ nie mogę po prostu objąć całego płótna za pomocą recta, ale działa to do tej pory.

Robię to, aby ustawić obraz tła strony internetowej i umieścić na nim animację na płótnie, bez konieczności rysowania tła w elemencie 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

Odpowiedź powyżej dostaje zadanie, jednak getImageData jest super powolny, a jeśli masz dużo innych rzeczy dzieje się to spowolni animacji ogromnie. Jeśli utworzysz element canvas z drugiego ekranu, możesz ustawić globalną alfę na .9 i przetasować je w tę iz powrotem i uzyskać ten sam efekt z dużo większą prędkością.

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.