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

Rumah

hujung hadapan web

Tutorial H5

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

May 16, 2016 pm 03:47 PM

canvas

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 <gaya>, mari lihat perbezaan yang akan berlaku. Saya mencuba perkara berikut sendiri, dan pasti ada masalah.

Lihat kod dahulu:

Salin kod

Kodnya adalah seperti berikut:

&lt ;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>kanvas</title> ;
&lt ;meta name="Keywords" content="">
<meta name="author" content="@my_programmer">
<style type="text/css" >
badan{margin:0;}
kanvas{margin:20px;
/*lebar: 400px;
tinggi: 300px;*/
}
</style> ;
< ;/head>
<body onload="draw()">
<canvas id="canvas" width=400 height=300 style="border:1px solid #f00 ;">&lt ;/canvas>
<skrip>
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 ();
}
</skrip>
</body>
</html>

1. Tulis terus dalam < Kesan dalam kanvas>:

2. Padamkan lebar dan tinggi dalam <kanvas>, lebar: 400; kesan penulisan dalam <gaya>:

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.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn