web-dev-qa-db-fra.com

Comment créer une toile transparente en html5?

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

html5canvas
99
Urmelinho

Les toiles sont transparentes par défaut.

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

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

158
Omiod

Si vous voulez qu'un <canvas id="canvasID"> particulier soit toujours transparent, vous devez simplement le définir.

#canvasID{
    opacity:0.5;
}

Si vous souhaitez que certains éléments de la zone de dessin soient transparents, vous devez les définir lorsque vous dessinez, c.-à-d.

context.fillStyle = "rgba(0, 0, 200, 0.5)";
41
stecb

Je pense que vous essayez de faire exactement ce que je viens d'essayer de faire: En raison de l'animation, vous devez effacer l'arrière-plan du calque supérieur en le rendant transparent au début du rendu de chaque nouvelle image. J'ai finalement trouvé la réponse: il n'utilise pas globalAlpha ni de couleur rgba (). La réponse simple et efficace est:

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

Il suffit de définir l’arrière-plan de la toile sur transparent.

#canvasID{
    background:transparent;
}
5
Marcel Bomfim

Peignez vos deux toiles sur une troisième toile.

J'ai eu le 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 au-dessus étaient visibles alors que la toile opaque en dessous ne l'était pas.

2
Chris
    var canvasBgColor = "#fff";
    this.canvas.fillStyle=canvasBgColor;
    this.canvas.fillRect(0, 0,this.canvas.width,this.canvas.height);

Vous pouvez d’abord dessiner un rectangle blanc en tant que couleur d’arrière-plan du canevas.

0
Jackdon Wang

Vous ne pouvez pas commenter la dernière réponse mais la solution est relativement facile. Il suffit de définir la couleur de fond 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 de fond soit héritée de manière transparente du corps.

0
1000Gbps