Comment créer une toile transparente en HTML5?

123

Comment rendre une toile transparente? J'en ai besoin parce que je veux mettre deux toiles l'une sur l'autre.

html canvas Urmelinho
la source

Réponses:

194

Les toiles sont transparentes par défaut.

Essayez de définir une image d'arrière-plan de page, puis placez une toile dessus. Si rien n'est dessiné sur le canevas, vous pouvez voir entièrement l'arrière-plan de la page.

Pensez à une toile comme à la peinture sur une plaque de verre.

Omiod
la source
6
La toile a un fond noir sur mobile, donc la superposition de toiles ne fonctionne pas là-bas. (Au moins sur Chrome pour Android)
nicholeous
11
Voilà pour les normes, comme d'habitude.
Triynko
6
Je pense que ces réponses manquent le point. Semblable à la question ci-dessus, je veux avoir deux toiles en couches: celle du bas a une image statique, mais celle du haut aura des sprites animés. Cette couche supérieure doit avoir un arrière-plan transparent, mais doit également être «effacée» et redessinée avec chaque image d'animation. Oui, il commence transparent par défaut, mais comment le réinitialiser sur transparent et le début de chaque nouvelle image d'animation?
J Sprague
3
Voici comment effacer un canevas à tout moment: stackoverflow.com/questions/2142535/…
Omiod
Puisque vous avez tellement de votes positifs Pouvez-vous au moins répondre à la question aussi? Comment rendre une toile non transparente transparente?
DDD
48

Je crois que vous essayez de faire exactement ce que je viens d'essayer de faire: je veux deux toiles empilées ... celle du bas a une image statique et celle du haut contient des sprites animés. En raison de l'animation, vous devez effacer l'arrière-plan du calque supérieur pour le rendre transparent au début du rendu de chaque nouvelle image. J'ai finalement trouvé la réponse: il n'utilise pas globalAlpha, et il n'utilise pas de couleur rgba (). La réponse simple et efficace est:

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

Si vous voulez qu'un particulier <canvas id="canvasID">soit toujours transparent, il vous suffit de définir

#canvasID{
    opacity:0.5;
}

Au lieu de cela, si vous voulez que certains éléments particuliers à l'intérieur de la zone de dessin soient transparents, vous devez définir la transparence lorsque vous dessinez, c'est-à-dire

context.fillStyle = "rgba(0, 0, 200, 0.5)";
stecb
la source
Ah, je cherchais la transparence fillStyle. Merci!
Workman
3
FYI: les opacitymodifications n'auront aucun effet s'il y a un fond de remplissage dans le canevas.
Adam Eberlin
3

Réglez simplement l'arrière-plan de la toile sur transparent.

#canvasID{
    background:transparent;
}
Marcel Bomfim
la source
1
Cette réponse ne fonctionne pas dans toutes les situations, context.clearRect (0, 0, largeur, hauteur) est la solution qui a fonctionné pour moi
Dmitriy
2

Peignez vos deux toiles sur une troisième toile.

J'ai eu ce même problème et aucune des solutions ici n'a résolu mon problème. J'avais une toile opaque avec une autre toile transparente au-dessus. La toile opaque était complètement invisible mais l'arrière-plan du corps de la page était visible. Les dessins de la toile transparente sur le dessus étaient visibles alors que la toile opaque en dessous ne l'était pas.

Chris
la source
0

Je ne peux pas commenter la dernière réponse mais le correctif est relativement simple. Définissez simplement la couleur d'arrière-plan de votre toile opaque:

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

Je ne suis pas sûr mais il semble que la couleur d'arrière-plan est héritée comme transparente du corps.

1 000 Gbit / s
la source