Bagaimanakah `object-fit` Berfungsi dengan Elemen Kanvas?

Memahami Object-Fit dengan Elemen Kanvas

Object-fit ialah sifat CSS yang menentukan cara imej atau elemen yang digantikan dimuatkan dalam bekasnya . Walaupun ia kelihatan mudah, tingkah laku muat objek dengan elemen kanvas boleh mengelirukan.

Soalan:

Bolehkah muat objek digunakan pada elemen kanvas dan bagaimanakah ia berkelakuan dalam konteks itu?

Jawapan:

Ya, object-fit boleh digunakan pada elemen kanvas. Walau bagaimanapun, kesannya hanya ketara apabila terdapat perubahan nisbah atau herotan. Object-fit hanya digunakan pada elemen yang diganti dan kanvas dianggap sebagai elemen yang diganti.

Contoh:

Mari kita lihat contoh untuk menggambarkan tingkah laku:

<code class="html"><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></code>

Dalam contoh ini, elemen kanvas mempunyai nilai kesesuaian objek yang berbeza. Tanpa padanan objek, kandungan kanvas akan diregangkan atau dihimpit untuk mengisi bekas.

• sesuai objek:contain: Kandungan kanvas diskalakan agar muat di dalam bekas tanpa herotan.
• object-fit:cover: Kandungan kanvas dipangkas untuk mengisi bekas.

Anda boleh melihat gelagat ini dengan lebih jelas dengan menyatakan dimensi eksplisit untuk bekas kanvas dan kandungan lukisan di dalam kanvas menggunakan JavaScript.

Atas ialah kandungan terperinci Bagaimanakah `object-fit` Berfungsi dengan Elemen Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!