Wie erstelle ich eine transparente Leinwand in HTML5?

122

Wie kann ich eine Leinwand transparent machen? Ich muss, weil ich zwei Leinwände übereinander legen möchte.

html canvas

— Urmelinho
quelle

192

Leinwände sind standardmäßig transparent.

Versuchen Sie, ein Seitenhintergrundbild festzulegen, und legen Sie dann eine Leinwand darüber. Wenn nichts auf der Leinwand gezeichnet ist, können Sie den Seitenhintergrund vollständig sehen.

Stellen Sie sich eine Leinwand wie das Malen auf einer Glasplatte vor.

— Omiod
quelle

5

Canvas hat auf Mobilgeräten einen schwarzen Hintergrund, sodass das Überlagern von Leinwänden dort nicht funktioniert. (Zumindest auf Chrome für Android)

— nicholeous

11

Soviel zu Standards, wie immer.

— Triynko

6

Ich denke, diese Antworten verfehlen den Punkt. Ähnlich wie bei der obigen Frage möchte ich zwei überlagerte Leinwände haben: Das untere hat ein statisches Bild, das obere hat animierte Sprites. Diese oberste Ebene muss einen transparenten Hintergrund haben, aber auch mit jedem Animationsrahmen "gelöscht" und neu gezeichnet werden. Ja, es wird standardmäßig transparent gestartet, aber wie setzen Sie es auf transparent und den Start jedes neuen Animationsrahmens zurück?

— J Sprague

3

So löschen Sie eine Leinwand jederzeit: stackoverflow.com/questions/2142535/…

— Omiod

Da du so viele positive Stimmen bekommen hast Kannst du zumindest auch die Frage beantworten? Wie macht man eine nicht transparente Leinwand transparent?

— DDD

47

Ich glaube, Sie versuchen genau das zu tun, was ich gerade versucht habe: Ich möchte zwei gestapelte Leinwände ... das untere hat ein statisches Bild und das obere enthält animierte Sprites. Aufgrund der Animation müssen Sie den Hintergrund der obersten Ebene zu Beginn des Renderns jedes neuen Frames transparent löschen. Ich habe endlich die Antwort gefunden: Es wird kein globalAlpha verwendet und es wird keine rgba () -Farbe verwendet. Die einfache und effektive Antwort lautet:

context.clearRect(0,0,width,height);

— J Sprague
quelle

44

Wenn Sie möchten, dass ein bestimmtes Objekt <canvas id="canvasID">immer transparent ist, müssen Sie es nur festlegen

#canvasID{
    opacity:0.5;
}

Wenn Sie stattdessen möchten, dass bestimmte Elemente im Canvas-Bereich transparent sind, müssen Sie beim Zeichnen die Transparenz festlegen, d. H.

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

— stecb
quelle

Ah, ich habe nach FillStyle-Transparenz gesucht. Vielen Dank!

— Arbeiter

2

Zu Ihrer Information: opacityÄnderungen haben keine Auswirkung, wenn die Leinwand mit Hintergrund gefüllt ist.

— Adam Eberlin

3

Stellen Sie einfach den Hintergrund der Leinwand auf transparent ein.

#canvasID{
    background:transparent;
}

— Marcel Bomfim
quelle

1

Diese Antwort funktioniert nicht in allen Situationen, context.clearRect (0, 0, Breite, Höhe) ist die Lösung, die für mich funktioniert hat

— Dmitriy

2

Malen Sie Ihre beiden Leinwände auf eine dritte Leinwand.

Ich hatte das gleiche Problem und keine der Lösungen hier löste mein Problem. Ich hatte eine undurchsichtige Leinwand mit einer anderen transparenten Leinwand darüber. Die undurchsichtige Leinwand war vollständig unsichtbar, aber der Hintergrund des Seitenkörpers war sichtbar. Die Zeichnungen von der transparenten Leinwand oben waren sichtbar, die undurchsichtige Leinwand darunter nicht.

— Chris
quelle

0

Ich kann die letzte Antwort nicht kommentieren, aber die Korrektur ist relativ einfach. Stellen Sie einfach die Hintergrundfarbe Ihrer undurchsichtigen Leinwand ein:

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

Ich bin mir nicht sicher, aber es sieht so aus, als würde die Hintergrundfarbe vom Körper als transparent vererbt.

— 1000 Gbit / s
quelle