Kann ich im Hintergrund meiner Seite ein HTML-Canvas-Element haben?-HTML-Tutorial-php.cn

Kann ich im Hintergrund meiner Seite ein HTML-Canvas-Element haben?

王林

Freigeben： 2023-09-12 14:29:02

nach vorne

1335 Leute haben es durchsucht

Kann ich im Hintergrund meiner Seite ein HTML-Canvas-Element haben?

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 von

Beispiel 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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!