Saiz Kanvas HTML5: CSS atau Atribut – Kaedah Mana Yang Memastikan Lukisan Tepat?

Percanggahan Saiz dalam Kanvas HTML5: CSS vs Atribut

Dalam penciptaan kanvas HTML5, seseorang mungkin menemui hasil yang berbeza apabila menetapkan atribut saiz secara langsung atau menggunakan Cascading Style Sheets (CSS). Pertimbangkan coretan kod berikut:

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

Pendekatan dipacu CSS ini menskalakan kanvas apabila dizum. Sebaliknya, menetapkan atribut secara langsung menghasilkan hasil yang dijangkakan:

<canvas></canvas>

Untuk menjelaskan percanggahan ini, adalah penting untuk memahami peranan berbeza kedua-dua elemen ini:

• Atribut Elemen Kanvas (lebar, tinggi): Atribut ini menentukan saiz sebenar kanvas dalam piksel, membenarkan lukisan dalam dimensi tersebut. Jika tidak dinyatakan, resolusi lalai ialah 300px kali 150px, mengikut spesifikasi HTML5.
• Sifat CSS (lebar, tinggi): Sifat ini menentukan saiz elemen kanvas dipaparkan pada skrin. Jika tidak ditetapkan, размер intrinsik elemen (ditentukan oleh atribut) mempengaruhi reka letaknya.

Apabila dimensi CSS berbeza daripada dimensi kanvas sebenar, penyemak imbas mesti menskalakan kanvas agar sesuai dengan paparan yang diingini saiz. Ini boleh mengakibatkan herotan jika nisbah aspek tidak dikekalkan. Contoh langsung tingkah laku ini tersedia di sini: http://jsfiddle.net/9bheb/5/.

Oleh itu, adalah penting untuk mempertimbangkan dengan teliti hasil yang diingini apabila menetapkan saiz kanvas. Untuk lukisan yang tepat dan tidak diherotkan, adalah disyorkan untuk menentukan dimensi secara langsung menggunakan atribut elemen kanvas dan bukannya bergantung semata-mata pada sifat CSS.

Atas ialah kandungan terperinci Saiz Kanvas HTML5: CSS atau Atribut – Kaedah Mana Yang Memastikan Lukisan Tepat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!