Heim > Artikel > Web-Frontend > Kann ich im Hintergrund meiner Seite ein HTML-Canvas-Element haben?
Kann ich im Hintergrund meiner Seite ein HTML-Canvas-Element haben?
- 王林nach vorne
- 2023-09-12 14:29:021360Durchsuche
In diesem Artikel werden wir sehen, ob es möglich ist, ein HTML-Canvas-Element zum Hintergrund meiner Seite hinzuzufügen.
Sie könnten versuchen, der Leinwand einen CSS-Stil mit der Position „fixed“ (oder „absolut“, falls zutreffend) hinzuzufügen, sodass sich das dahinter liegende Material darüber befindet.
Um besser zu verstehen, ob ich ein HTML-Canvas-Element im Hintergrund meiner Seite verwenden kann, schauen wir uns das folgende Beispiel an...
Die chinesische Übersetzung vonBeispiel 1
lautet:Beispiel 1
Im folgenden Beispiel verwenden wir position:absolute, um CSS-Stile auf die Leinwand anzuwenden.
<!DOCTYPE html>
<html>
<style>
canvas{
position:absolute;
left:0;
top:0;
z-index:-1;
}
div{
position:absolute;
z-index:0;
left:11px;
top:14px;
}
</style>
<body>
<canvas id="mytutorial" width="450" height="500" style="border:1px solid #ABEBC6;"></canvas>
<div>Welcome To Tutorialspoint</div>
<script>
var c = document.getElementById("mytutorial");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 600, 600);
grd.addColorStop(0, "#D35400");
grd.addColorStop(1, "#73C6B6");
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 600, 600)
</script>
</body>
</html>
Wenn Sie das obige Skript ausführen, öffnet sich das Ausgabefenster und eine Leinwand mit dem Text „Willkommen bei Tutorialspoint“ wird auf der Webseite als Hintergrund angezeigt.
Beispiel 2
Betrachten wir ein weiteres Beispiel für die Verwendung des HTML-Canvas-Elements im Hintergrund der Seite.
<!DOCTYPE html>
<html>
<style>
body {
background: #dddddd;
}
#tutorial {
margin: 20px;
padding: 20px;
background: #ffffff;
border: thin inset #aaaaaa;
width: 600px;
height: 300px;
}
</style>
<body>
<canvas id='tutorial'></canvas>
<script>
var canvas = document.getElementById('tutorial'),
context = canvas.getContext('2d');
context.font = '38pt arial';
context.strokeStyle = '#82E0AA';
context.strokeText('Welcome', canvas.width/2 - 150, canvas.height/2 + 15 );
</script>
</body>
</html>
Nachdem das obige Skript ausgeführt wurde, wird eine Ausgabe generiert, die aus gestricheltem Text besteht, der die auf der Webseite angezeigte Leinwand als Hintergrund der Seite ausfüllt.
Das obige ist der detaillierte Inhalt vonKann ich im Hintergrund meiner Seite ein HTML-Canvas-Element haben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!