Bolehkah Anda Menggunakan `object-fit` dengan Elemen Kanvas?

Adakah padanan objek berfungsi dengan Elemen Kanvas?

Harta muat objek direka bentuk untuk mengawal penskalaan dan kedudukan imej atau video dalam bekasnya. Walau bagaimanapun, keserasiannya dengan elemen kanvas telah menjadi topik perdebatan.

Bolehkah object-fit Diterapkan pada Elemen Kanvas?

Ya, object-fit boleh digunakan kepada elemen kanvas. Walau bagaimanapun, ia hanya berkuat kuasa apabila terdapat perubahan dalam nisbah bidang bekas kanvas, menyebabkan herotan dalam imej atau lukisan.

Memahami Cara muatkan objek Berfungsi dengan Kanvas

Untuk elemen kanvas, padanan objek berkelakuan berbeza berdasarkan senario berikut:

• Apabila nisbah bidang bekas sepadan dengan nisbah bidang kanvas: Tiada penskalaan atau perubahan kedudukan berlaku.
• Apabila nisbah bidang bekas berbeza daripada nisbah bidang kanvas: muat objek menjadi terpakai. Kanvas akan diskalakan dan diletakkan dalam bekas mengikut nilai yang ditentukan.

Contoh:

Pertimbangkan coretan CSS berikut:

<code class="css">canvas {
  width: 100px;
  height: 250px;
  border: 1px solid red;
  display: block;
}

.box {
  display: inline-block;
  border: 2px solid green;
}</code>

Dan HTML berikut:

<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, kanvas pertama akan mengekalkan nisbah aspek asalnya, manakala yang kedua akan diskalakan agar muat dalam bekas menggunakan object-fit: contain nilai. Kanvas ketiga akan diskalakan untuk menutup bekas menggunakan object-fit: cover.

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!