Rumah > Artikel > hujung hadapan web > Bolehkah saya mempunyai elemen kanvas HTML di latar belakang halaman saya?
Bolehkah saya mempunyai elemen kanvas HTML di latar belakang halaman saya?
- 王林ke hadapan
- 2023-09-12 14:29:021315semak imbas
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 bagiContoh 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>
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>
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!