| 

.NET C# Java Javascript Exception

3
Ich generiere per JScript und CSS ein Canvas-Bild auf meiner Web-Site. Nun möchte ich dieses Element mit HTML-Text sozusagen überlagern, ohne den Text an sich zu Zeichnen. Die Textinhalte stammen aus einer Textdatei. Ist so etwas mit JavaScript oder vielleicht auch per CSS möglich?
News:
28.01.2012
Athar hameed 11 1 2
1 Antwort
1
Hi

Der einfachste weg wäre, im Canvas-Element ein Div absolut zu positionieren, um automatisch eine Überlagerung zu erzwingen. Das geht leider nicht, da Inhalte im Canvas-Tag nur von Browsern dargestellt werden, die den nicht kennen.

Stattdessen ist es nötig, ein Div drumherum zu bauen, und eines parallel zum Canvas zu setzen, dass dann relativ zum Eltern-Div ppositioniert wird:

<div class='overlayCanvas'>
<canvas></canvas>
<div>Text</div>
</div>


Das nötige CSS sieht etwa so aus:

.overlayCanvas{
position:relative;
}

.overlayCanvas>div{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}


So erhält das innere Div exakt die Maße und Position des Containers, der seine Größe wiederum durch das Canvas erhält.

Für konkrete Anforderungen - zB Bildunterschriften - wären wohl andere Positionierungen sinnvoller.

Grüße
huckepick
28.01.2012
huckepick 887 2 8

Stelle deine Javascript-Frage jetzt!