Bolehkah saya mempunyai elemen kanvas HTML di latar belakang halaman saya?-html tutorial-php.cn

Bolehkah saya mempunyai elemen kanvas HTML di latar belakang halaman saya?

王林

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

ke hadapan

1381 orang telah melayarinya

Bolehkah saya mempunyai elemen kanvas HTML di latar belakang halaman saya?

Dalam artikel ini, kita akan melihat sama ada boleh menambah elemen kanvas HTML pada latar belakang halaman saya.

Anda boleh cuba menambah gaya CSS pada kanvas dengan kedudukan: tetap (atau mutlak, jika berkenaan) supaya sebarang bahan di belakangnya akan berada di atasnya.

Untuk lebih memahami jika saya boleh menggunakan elemen kanvas HTML di latar belakang halaman saya, mari lihat contoh berikut...

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Dalam contoh di bawah, kami menggunakan position:absolute untuk menggunakan gaya CSS pada kanvas.

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

Salin selepas log masuk

Apabila menjalankan skrip di atas, tetingkap output muncul dan kanvas dengan teks "selamat datang ke tutorialspoint" dipaparkan pada halaman web sebagai latar belakang.

Contoh 2

Mari kita pertimbangkan satu lagi contoh menggunakan elemen kanvas HTML di latar belakang halaman.

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

Salin selepas log masuk

Selepas menjalankan skrip di atas, ia akan menjana output yang terdiri daripada teks yang diusap yang mengisi kanvas yang dipaparkan pada halaman web sebagai latar belakang halaman.

Atas ialah kandungan terperinci Bolehkah saya mempunyai elemen kanvas HTML di latar belakang halaman saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!