Rumah hujung hadapan web Tutorial H5 Kanvas perlu menentukan lebar dan tinggi secara langsung dalam kemahiran tutorial tag_html5

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

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Sekolah mana yang menggunakan kanvas? Sekolah mana yang menggunakan kanvas? Aug 18, 2023 pm 05:59 PM

Sekolah mana yang menggunakan kanvas?

Apakah pemalam anak panah kanvas? Apakah pemalam anak panah kanvas? Aug 21, 2023 pm 02:14 PM

Apakah pemalam anak panah kanvas?

Apakah butiran jam kanvas? Apakah butiran jam kanvas? Aug 21, 2023 pm 05:07 PM

Apakah butiran jam kanvas?

Untuk gaya manakah html2canvas tidak sah? Untuk gaya manakah html2canvas tidak sah? Nov 24, 2023 pm 03:25 PM

Untuk gaya manakah html2canvas tidak sah?

Aliran pembangunan dan prospek masa depan Kanvas dalam sektor pendidikan China Aliran pembangunan dan prospek masa depan Kanvas dalam sektor pendidikan China Jan 17, 2024 am 10:22 AM

Aliran pembangunan dan prospek masa depan Kanvas dalam sektor pendidikan China

Apakah versi html2canvas yang ada? Apakah versi html2canvas yang ada? Aug 22, 2023 pm 05:58 PM

Apakah versi html2canvas yang ada?

Apakah sifat yang dimiliki oleh tkinter canvas? Apakah sifat yang dimiliki oleh tkinter canvas? Aug 21, 2023 pm 05:46 PM

Apakah sifat yang dimiliki oleh tkinter canvas?

Di manakah koordinat tetikus kanvas? Di manakah koordinat tetikus kanvas? Aug 22, 2023 pm 03:08 PM

Di manakah koordinat tetikus kanvas?

See all articles