Bolehkah anda Menggunakan Object-Fit dengan Elemen Kanvas?

Memahami Object-Fit dalam Elemen Kanvas

Object-fit ialah sifat CSS yang menentukan cara kandungan elemen dimuatkan dalam bekas induknya. Walau bagaimanapun, kelakuannya boleh menjadi tidak konsisten apabila digunakan pada elemen yang digantikan seperti kanvas.

Bolehkah Object-Fit Digunakan dengan Elemen Kanvas?

Ya, object-fit boleh digunakan dengan elemen kanvas. Walau bagaimanapun, kesannya terhad kepada kes di mana perubahan nisbah berlaku, mengakibatkan herotan.

Cara Object-Fit Mempengaruhi Elemen Kanvas

Object-fit hanya akan menjejaskan elemen kanvas apabila nisbah bidangnya berbeza daripada bekas induknya. Dalam kes sedemikian, sifat tersebut menentukan cara kandungan kanvas diskalakan atau dipangkas agar sesuai dengan ruang yang tersedia.

Jenis-Jenis Object-Fit untuk Elemen Kanvas

• mengandungi: Mengecilkan kandungan agar muat dalam bekas induk, mengekalkan nisbah bidang.
• penutup: Menskalakan kandungan untuk menutup bekas induk, bahagian yang berpotensi memotong daripada kandungan.

Contoh

Pertimbangkan coretan kod berikut:

<div class="box">
  <canvas width="200" height="200"></canvas>
</div>

<div class="box">
  <canvas width="200" height="200" style="object-fit:contain;"></canvas>
</div>

<div class="box">
  <canvas width="200" height="200" style="object-fit:cover;"></canvas>
</div>

Dalam contoh ini, ketiga-tiga elemen kanvas mempunyai saiz yang sama pada mulanya. Walau bagaimanapun, elemen dengan object-fit:contain akan mengecilkan kandungannya agar muat dalam bekas induk, manakala elemen dengan object-fit:cover akan meningkatkan kandungannya untuk menutup bekas, memotong sebahagian daripada kandungan.

Atas ialah kandungan terperinci Bolehkah anda Menggunakan Object-Fit dengan Elemen Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!