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

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