Kanvas perlu menentukan lebar dan tinggi secara langsung dalam kemahiran tutorial tag_html5

Dahulu, apabila saya menggunakan kanvas untuk melukis gambar, saya selalu menulis lebar dan tinggi secara langsung dalam tag kanvas. Namun, saya tidak pernah meneroka mengapa lebar dan tinggi harus ditulis secara langsung teg kanvas, kerana ini berlaku dalam pelbagai contoh. Hari ini Sir Wang membangkitkan soalan: Jika lebar dan tinggi ditulis dalam , mari lihat perbezaan yang akan berlaku. Saya mencuba perkara berikut sendiri, dan pasti ada masalah.

Lihat kod dahulu:

Salin kod

Kodnya adalah seperti berikut:

< ;!DOCTYPE html>



;
< ;meta name="Keywords" content="">

> ;
< ;/head>

< ;/canvas>

fungsi draw() {
var canvas=document.getElementById('canvas');
var context=canvas.getContext(' 2d');
context.beginPath();
context.moveTo(20,20);
context.lineTo(200,100);
context.lineWidth=5;
context.stroke ();
}

1. Tulis terus dalam :

2. Padamkan lebar dan tinggi dalam , lebar: 400; kesan penulisan dalam :

Mengapa kesan kedua-duanya berbeza?

Kanvas, seperti teg lain, juga boleh digayakan melalui CSS. Tetapi apa yang perlu diperhatikan di sini ialah lebar dan ketinggian lalai kanvas ialah 300px * 150px Jika kanvas digunakan dalam situasi ini Melukis, grafik yang anda dapat mungkin kesan ubah bentuk. Oleh itu, apabila melukis di atas kanvas, lebar dan ketinggian hendaklah ditakrifkan secara langsung dalam tag kanvas.