Mengapa Kanvas Saya Mempunyai Ruang Putih Tambahan dan Penatalan Berlebihan?

Isu Tatal Kanvas: Ruang Putih di Bawah dan Tatal Berlebihan

Apabila menatal kanvas dalam div, pengguna mungkin menghadapi dua masalah: putih ruang di bahagian bawah kanvas dan penatalan berlebihan yang mendedahkan latar belakang div asas. Ini disebabkan terutamanya oleh status elemen sebaris lalai kanvas.

Penyelesaian: Tukar Kanvas kepada Elemen Sekat

Untuk menyelesaikan isu ini, kanvas mesti ditukar kepada elemen blok. Ini boleh dilakukan melalui CSS dengan menambahkan sifat "display: block" pada kanvas.

Penjajaran Menegak

Sebagai alternatif, jika menukar kanvas kepada elemen blok ialah tidak sesuai, penjajaran menegak boleh digunakan. Tambahkan "vertical-align: top" pada CSS kanvas untuk memastikan ia dijajarkan di bahagian atas div, menghapuskan sebarang ruang putih di bahagian bawah.

Kod Disemak:

Coretan kod yang disemak berikut menggabungkan yang dicadangkan penyelesaian:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = '#00aa00'
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = '#fff'
ctx.font='12pt A'
ctx.fillText("scroll here to see red from screen div", 30, 50);

.screen {
  background: red;
  height: 100px;
  width: 300px;
  overflow: auto;
  border-radius: 20px;
}
canvas {
 display:block; /* or vertical-align:top; */
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

<div class="screen">
  <canvas>

Dengan melaksanakan pengubahsuaian ini, kanvas kini akan menatal ke penghujung kandungannya tanpa mendedahkan latar belakang div yang mendasarinya.

Atas ialah kandungan terperinci Mengapa Kanvas Saya Mempunyai Ruang Putih Tambahan dan Penatalan Berlebihan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!