Mengapa Atribut CSS dan HTML Menghasilkan Saiz Kanvas yang Berbeza?

Percanggahan Saiz Kanvas dalam CSS lwn. Atribut Elemen

Apabila menggunakan kanvas HTML5, anda mungkin menghadapi hasil yang berbeza bergantung pada sama ada anda menetapkan saiz menggunakan CSS atau atribut elemen. Percanggahan ini timbul kerana CSS menskalakan kanvas seolah-olah ia dizum masuk, manakala atribut elemen menentukan kawasan boleh lukis sebenar.

Untuk menggambarkan, pertimbangkan kod berikut:

<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas>

Kod ini akan buat kanvas yang kelihatan seperti 800x600 piksel pada skrin. Walau bagaimanapun, kawasan boleh lukis sebenar hanya 300x150 piksel, mengikut dimensi unsur kanvas lalai dalam spesifikasi HTML.

Sebaliknya, kod berikut:

<canvas>

akan mencipta kanvas dengan kawasan boleh lukis sebenar 800x600 piksel. Ini kerana atribut lebar dan ketinggian menentukan bilangan piksel yang tersedia untuk lukisan.

Pembezaan adalah penting kerana CSS boleh memesongkan kanvas jika saiz paparan dan saiz sebenar berbeza. Sebagai contoh, jika anda menentukan saiz kanvas 32x32 piksel tetapi menetapkan saiz CSS kepada 800x16px, penyemak imbas akan meregangkan dan meregangkan kanvas agar sesuai dengan paparan. Ini boleh menjejaskan kualiti mana-mana lukisan atau grafik yang dipaparkan pada kanvas.

Atas ialah kandungan terperinci Mengapa Atribut CSS dan HTML Menghasilkan Saiz Kanvas yang Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!