Mengapa Atribut CSS dan Elemen Menghasilkan Saiz Kanvas HTML5 yang Berbeza?

Saiz Percanggahan Kanvas HTML5: CSS lwn. Atribut Elemen

Apabila menetapkan saiz kanvas HTML5, anda mungkin menghadapi hasil yang tidak dijangka bergantung sama ada anda menggunakan CSS atau atribut elemen.

Diperhatikan Perbezaan:

Coretan kod berikut menghasilkan saiz kanvas yang berbeza:

<!-- Using CSS -->
<style>
#canvas {
    width: 800px;
    height: 600px;
}
</style>
<canvas>

Penjelasan:

Perbezaan ini timbul daripada peranan yang berbeza CSS dan atribut elemen.

• Sifat CSS (lebar, tinggi): Kawal saiz visual elemen pada skrin, menskalakannya ke atas atau ke bawah seperti yang dinyatakan. Walau bagaimanapun, bilangan piksel sebenar yang tersedia untuk lukisan pada kanvas tidak terjejas.
• Atribut elemen (lebar, tinggi): Tentukan saiz fizikal kanvas itu sendiri, tetapkan bilangan piksel yang boleh dilukis. Jika atribut ini tidak ditetapkan, dimensi lalai ialah 300px kali 150px.

Contoh:

Pertimbangkan imej dengan dimensi sebenar 32x32 piksel. Jika anda menggunakan CSS untuk memaparkannya dengan dimensi 800px kali 16px, penyemak imbas mesti meregangkan atau memampatkan imej agar sesuai dengan saiz yang ditentukan. Prinsip yang sama digunakan pada Kanvas HTML.

Apabila menggunakan dimensi CSS yang berbeza daripada saiz kanvas sebenar, penyemak imbas menskalakan kanvas untuk paparan. Ini boleh mengakibatkan herotan piksel atau tingkah laku yang tidak diingini. Oleh itu, adalah disyorkan untuk menetapkan kedua-dua sifat CSS dan atribut elemen agar sepadan dengan dimensi kanvas yang diingini untuk memastikan pemaparan yang tepat.

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