HTML5, jak narysować przezroczysty obraz pikselowy w kanwie - obraz, html5, płótno, piksel, przezroczysty

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

Odpowiedzi:

Jeśli rozumiem, czego potrzebujesz, zasadniczo chcesz zmienić określone kolory na obrazie przezroczystym. Aby to zrobić, musisz użyć getImageData sprawdzić mdn dla wyjaśnienia manipulacji pikselami.

Oto 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);​

I działające demo

W powyższym kodzie możesz sprawdzić fuschię za pomocą

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

Myślę, że chcesz clearRect metoda canvas:

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

Pozwoli to usunąć przezroczyste piksele (lub dowolny inny kolor RGBA) bez zamieszania lub manipulacji pikselami.

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łkowicieprzezroczysty (wartość alfa równa 0) nie ma znaczenia, czego używasz dla wartości RGB, o ile używasz alfa 0. Na notatce bocznej niektóre starsze programy systemu Windows, które użyłem, przyjmują założenie, takie jak górny lewy piksel lub dolny prawy piksel ma być użyty jako kolor przezroczysty, a następnie pętli przez wszystkie piksele i ustawić wartość alfa na 0, gdy napotka określoną wartość RGB.

Jeśli użyjesz Alfy 127 i pojawi się obrazna górze innego obrazu będzie wyglądać tak, jak dwa obrazy są jednakowo widoczne lub, że dolny obraz krwawi 50% jego 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.