Baru-baru ini, karena kebutuhan pekerjaan, saya mempelajari tentang tag Canvas di Html.
Kanvas adalah komponen baru HTML5. Ini seperti tirai tempat berbagai bagan, animasi, dll. dapat digambar menggunakan JavaScript.
Di era sebelum Canvas, menggambar hanya dapat dilakukan dengan bantuan plugin Flash, dan halaman harus menggunakan JavaScript dan Flash untuk berinteraksi. Dengan Canvas, kita tidak memerlukan Flash lagi dan bisa langsung menggunakan JavaScript untuk menyelesaikan gambar.
Masalahnya dimulai ketika saya sendiri menulis hello world setelah menonton tutorial. Lihatlah kode di bawah ini:
<!DOCTYPE html><html lang=en><body><canvas id=canvas1 style=width: 200px;height: 200px border:1px hitam pekat;></canvas><script> var oC = document.getElementById( 'kanvas1'); var ctx = oC.getContext(2d); 0);ctx.lineTo(200, 200);ctx.stroke();</script></body></html>
Maksud dari kode di atas adalah menggambar garis lurus pada kanvas dengan lebar dan tinggi masing-masing 200px. Titik awal garis lurus tersebut adalah (0,0) dan titik akhirnya adalah (200,200);
Namun, gambar yang digambar oleh browser adalah:
Coba lihat gambar ini~ Kenapa kemiringannya seperti itu? Seharusnya tidak~ Seharusnya garis diagonal~~
Belakangan setelah mencari informasi, saya menemukan bahwa saat mengatur lebar dan tinggi tag kanvas, ada cara dan konsekuensinya sebagai berikut:
Lebar default elemen Canvas adalah 300px dan tingginya 150px. Untuk mengatur lebar dan tinggi, Anda dapat menggunakan cara berikut:
Metode satu:
1 <lebar kanvas=500 tinggi=500$amp;>amp;$lt;/kanvas>
Metode 2: Gunakan operasi API Kanvas HTML5
1 var canvas = document.getElementById('id kanvas yang akan dioperasikan');
2 kanvas.lebar = 500;
3 kanvas.lebar = 500;
Jika lebar dan tinggi diatur dengan cara berikut, elemen Canvas akan diregangkan dari ukuran aslinya ke lebar dan tinggi yang ditentukan:
Metode 1: Menggunakan CSS akan meregangkan
1 #Untuk mengoperasikan id kanvas{
2 lebar: 1000 piksel;
3 tinggi:1000 piksel;
4 ｝
Juga menyertakan style= dalam gaya sebaris. Artinya, pada contoh di atas juga akan terjadi peregangan.
Metode 2: Operasi yang menggunakan API Kanvas HTML5 akan diperluas
1 var canvas = document.getElementById('id kanvas yang akan dioperasikan');
2 kanvas.gaya.lebar = 1000 piksel;
3 kanvas.gaya.tinggi = 1000 piksel;
Metode 3: Menggunakan $(#id).width(500); jquery akan diregangkan
Lainnya: Lebar dan tinggi kanvas tidak dapat dinyatakan dalam persentase. kanvas akan menampilkan persentase sebagai nilai numerik
Oleh karena itu, dari informasi di atas kita dapat mengetahui bahwa penyebabnya adalah kode pada contoh saya di atas akan meregangkan lebar dan tinggi kanvas sehingga membuat gambar tidak sesuai dengan ekspektasi.
Sekarang saya telah menulis ulang contoh kode untuk mengatur lebar dan tinggi kanvas dengan benar:
<!DOCTYPE HTML><html><body><canvas id=myCanvas width=200 height=200 style=border:1px solid black;> Browser Anda tidak mendukung elemen kanvas.</canvas><script type=text/ javascript> var c = dokumen.getElementById(myCanvas); var cxt = c.getContext(2d); cxt.lineTo(200, 200); cxt.stroke();</script></body></html>
hasil:
Menyelesaikan.
MeringkaskanDi atas adalah keseluruhan isi artikel ini, saya berharap isi artikel ini memiliki nilai referensi tertentu untuk belajar atau bekerja semua orang. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk komunikasi Jaringan.