Jak zrobić przezroczyste płótno w HTML5?

123

Jak mogę uczynić płótno przezroczystym? Muszę, ponieważ chcę położyć dwa płótna jeden na drugim.

html canvas Urmelinho
źródło

Odpowiedzi:

194

Płótna są domyślnie przezroczyste.

Spróbuj ustawić obraz tła strony, a następnie umieść na nim płótno. Jeśli nic nie jest narysowane na płótnie, możesz w pełni zobaczyć tło strony.

Pomyśl o płótnie jak o obrazie na szklanej płycie.

Omiod
źródło
6
Płótno ma czarne tło na telefonie komórkowym, więc nie działa tam nakładanie warstw. (Przynajmniej w Chrome na Androida)
Nicholeous
11
Tyle jeśli chodzi o standardy, jak zwykle.
Triynko
6
Myślę, że te odpowiedzi nie mają sensu. Podobnie jak w powyższym pytaniu, chcę mieć dwa warstwowe płótna: dolne ma statyczny obraz, ale górne będzie miało animowane duszki. Ta górna warstwa musi mieć przezroczyste tło, ale musi być również „wyczyszczona” i przerysowana z każdą klatką animacji. Tak, domyślnie zaczyna być przezroczysty, ale jak przywrócić przezroczystość i początek każdej nowej klatki animacji?
J Sprague,
3
Oto jak w każdej chwili wyczyścić płótno: stackoverflow.com/questions/2142535/…
Omiod
Ponieważ dostałeś tak wiele pozytywnych głosów, czy możesz przynajmniej odpowiedzieć na to pytanie? Jak sprawić, by nieprzezroczyste płótno stało się przezroczyste?
DDD
48

Wydaje mi się, że próbujesz zrobić dokładnie to, co właśnie próbowałem zrobić: chcę dwa ułożone w stos płótna ... dolne ma statyczny obraz, a górne zawiera animowane duszki. Z powodu animacji musisz wyczyścić tło górnej warstwy, aby było przezroczyste na początku renderowania każdej nowej klatki. W końcu znalazłem odpowiedź: nie używa globalAlpha i nie używa koloru rgba (). Prosta i skuteczna odpowiedź brzmi:

context.clearRect(0,0,width,height);
J Sprague
źródło
45

Jeśli chcesz, aby konkret <canvas id="canvasID">był zawsze przezroczysty, po prostu musisz go ustawić

#canvasID{
    opacity:0.5;
}

Zamiast tego, jeśli chcesz, aby niektóre elementy wewnątrz obszaru płótna były przezroczyste, musisz ustawić przezroczystość podczas rysowania, tj

context.fillStyle = "rgba(0, 0, 200, 0.5)";
stecb
źródło
Ach, szukałem przejrzystości fillStyle. Dzięki!
Workman
3
Do Twojej wiadomości: opacityzmiany nie przyniosą efektu, jeśli na płótnie będzie wypełnione tło.
Adam Eberlin
3

Po prostu ustaw przezroczyste tło płótna.

#canvasID{
    background:transparent;
}
Marcel Bomfim
źródło
1
Ta odpowiedź nie działa we wszystkich sytuacjach, context.clearRect (0, 0, width, height) to rozwiązanie, które zadziałało dla mnie
Dmitriy
2

Pomaluj swoje dwa płótna na trzecim płótnie.

Miałem ten sam problem i żadne z rozwiązań tutaj nie rozwiązało mojego problemu. Miałem jedno nieprzezroczyste płótno z innym przezroczystym płótnem nad nim. Nieprzezroczyste płótno było całkowicie niewidoczne, ale tło strony było widoczne. Rysunki z przezroczystego płótna na górze były widoczne, podczas gdy nieprzezroczyste płótno poniżej nie było.

Chris
źródło
0

Nie mogę skomentować ostatniej odpowiedzi, ale poprawka jest stosunkowo łatwa. Po prostu ustaw kolor tła nieprzezroczystego płótna:

#canvas1 { background-color: black; } //opaque canvas
#canvas2 { ... } //transparent canvas

Nie jestem pewien, ale wygląda na to, że kolor tła jest dziedziczony z ciała jako przezroczysty.

1000 Gb / s
źródło