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.

html canvas

— Urmelinho
fonte

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