HTML5 jak narysować przezroczysty obraz piksela na płótnie

Question

Rysuję obraz przy użyciu danych pikseli rgb. Muszę ustawić przezroczysty kolor tła dla tego obrazu. Jaką wartość mogę ustawić dla alfa jako przezroczystego obrazu? Czy jest jakieś inne rozwiązanie tego problemu?

Answer 1

Jeśli rozumiem, czego potrzebujesz, zasadniczo chcesz zmienić określone kolory na obrazie przezroczystym. Aby to zrobić, musisz użyć getImageData check out mdn for an explanation on pixel manipulation.

Herezje niektóre przykładowy kod

var imgd = ctx.getImageData(0, 0, imageWidth, imageHeight), 
    pix = imgd.data; 

for (var i = 0, n = pix.length; i <n; i += 4) { 
    var r = pix[i], 
     g = pix[i+1], 
     b = pix[i+2]; 

    if(g > 150){ 
     // If the green component value is higher than 150 
     // make the pixel transparent because i+3 is the alpha component 
     // values 0-255 work, 255 is solid 
     pix[i + 3] = 0; 
    } 
} 

ctx.putImageData(imgd, 0, 0);​ 

And a working demo

Z powyższego kodu można sprawdzić na fuschia za pomocą

if(r == 255 && g == 0 && b == 255)

Answer 2

alfa 0 wskazań, że piksel jest całkowicie przezroczysty, wartość alfa wynosząca 255 jest całkowicie nieprzejrzysta, co oznacza, że ​​nie będzie przezroczysty.

jeśli części obrazu są całkowicie przezroczyste (wartość alfa równa 0), nie ma znaczenia, co użyjesz dla wartości RGB, o ile użyjesz alfa 0. Na bocznym notatniku niektóre starsze programy Windows, które ja zastosowali się do założenia takiego jak górny lewy piksel lub prawy dolny piksel ma być użyty jako kolor przezroczystości. Następnie przeliczy wszystkie piksele i ustawi wartość alfa na 0, gdy napotka określoną wartość RGB.

Jeśli użyjesz alfa 127, a obraz pojawi się na innym obrazie, będzie wyglądać, że oba obrazy są jednakowo widoczne lub że dolny obraz krwawi 50% swoich kolorów do najwyższego obrazu.

Ustaw zmienną dla alfa, jeśli chcesz przetestować i zobaczyć, jak wygląda po zastosowaniu go do całego obrazu.

Answer 3

myślę chcesz clearRect płótno m ethod:

http://www.w3schools.com/html5/canvas_clearrect.asp

to pozwoli Ci jasnych pikseli na przezroczyste (lub dowolnego innego koloru RGBA) bez zamieszania lub manipulacji pikseli.