Como faço para criar uma tela transparente em html5?

123

Como posso tornar uma tela transparente? Preciso, porque quero colocar duas telas uma sobre a outra.

Urmelinho
fonte

Respostas:

193

As telas são transparentes por padrão.

Tente definir uma imagem de fundo da página e coloque uma tela sobre ela. Se nada for desenhado na tela, você poderá ver completamente o plano de fundo da página.

Pense em uma tela como se estivesse pintando um prato de vidro.

Omiod
fonte
6
A tela tem um plano de fundo preto no celular, para que as telas em camadas não funcionem lá. (Pelo menos no Chrome para Android)
nicholeous
11
Tanta coisa para os padrões, como sempre.
Triynko 7/08
6
Eu acho que essas respostas estão perdendo o objetivo. Semelhante à pergunta acima, quero ter duas telas em camadas: a inferior tem uma imagem estática, mas a superior terá sprites animados. Essa camada superior precisa ter um plano de fundo transparente, mas também precisa ser 'limpa' e redesenhada a cada quadro de animação. Sim, ele começa transparente por padrão, mas como você o redefine para transparente e o início de cada novo quadro de animação?
J Sprague
3
Isto é como limpar uma tela a qualquer momento: stackoverflow.com/questions/2142535/…
Omiod 18/15
Desde que você recebeu tantos votos, você também pode pelo menos responder à pergunta? Como você torna uma tela não transparente transparente?
DDD
48

Acredito que você esteja tentando fazer exatamente o que acabei de tentar: quero duas telas empilhadas ... a inferior tem uma imagem estática e a superior contém sprites animados. Por causa da animação, você precisa limpar o fundo da camada superior para ficar transparente no início da renderização de cada novo quadro. Finalmente encontrei a resposta: não está usando globalAlpha e não está usando uma cor rgba (). A resposta simples e eficaz é:

context.clearRect(0,0,width,height);
J Sprague
fonte
45

Se você quer que um determinado <canvas id="canvasID">seja sempre transparente, basta definir

#canvasID{
    opacity:0.5;
}

Em vez disso, se você deseja que alguns elementos particulares dentro da área da tela sejam transparentes, defina a transparência ao desenhar, ou seja,

context.fillStyle = "rgba(0, 0, 200, 0.5)";
stecb
fonte
Ah, eu estava procurando por transparência fillStyle. Obrigado!
Workman
3
Para sua informação: as opacityalterações não terão efeito se houver um preenchimento de segundo plano na tela.
Adam Eberlin
3

Basta definir o plano de fundo da tela como transparente.

#canvasID{
    background:transparent;
}
Marcel Bomfim
fonte
1
Esta resposta não funciona em todas as situações, context.clearRect (0, 0, largura, altura) é a solução que funcionou para mim
Dmitriy
2

Pinte suas duas telas em uma terceira tela.

Eu tive esse mesmo problema e nenhuma das soluções aqui resolveu o meu problema. Eu tinha uma tela opaca com outra tela transparente acima dela. A tela opaca era completamente invisível, mas o fundo do corpo da página era visível. Os desenhos da tela transparente na parte superior eram visíveis, enquanto a tela opaca abaixo dela não era.

Chris
fonte
0

Não posso comentar a última resposta, mas a correção é relativamente fácil. Basta definir a cor de fundo da sua tela opaca:

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

Não tenho certeza, mas parece que a cor de fundo é herdada como transparente do corpo.

1000Gbps
fonte