Komentar: Kanvas berarti kanvas. Meskipun semua orang menyebut Canvas tag baru untuk HTML5, tampaknya kanvas milik pengetahuan baru tentang bahasa HTML, pada kenyataannya, gambar kanvas dibuat melalui JavaScript. Jadi, jika Anda ingin belajar menggambar kanvas, Anda harus memiliki fondasi javascript
Meskipun semua orang menyebut Canvas tag baru untuk HTML5, tampaknya kanvas milik pengetahuan baru tentang bahasa HTML, pada kenyataannya, gambar kanvas dilakukan melalui JavaScript. Jadi, jika Anda ingin mempelajari gambar kanvas, Anda harus memiliki fondasi JavaScript.Selain itu, ketika menggambar, selalu ada beberapa istilah dan poin pengetahuan dalam citra, jadi jika Anda memiliki pengalaman dalam membuat gambar atau seni, akan lebih mudah untuk mempelajari kanvas.
Kanvas berarti kanvas. Kanvas di HTML5 sangat mirip dengan kanvas dalam kehidupan nyata. Jadi, melihatnya sebagai kanvas yang nyata dapat mempercepat pemahaman.
kanvas
Untuk menggambar dengan kanvas, pertama -tama, Anda harus memiliki kanvas. Jika Anda tidak memiliki kanvas di rak buku Anda, Anda dapat membeli gulungan dan memasukkannya. Tentu saja, kami tidak perlu menghabiskan uang di halaman web, cukup tulis kanvas, mirip dengan:
<an Canvas> browser Anda tidak mendukung Canvas </ Canvas>
Teks dalam tag adalah untuk browser yang tidak mendukung kanvas, dan yang didukung tidak akan pernah terlihat.
Catatan: perlu menyebutkan karakteristik kanvas ini. Seperti IMG, ia memiliki dua atribut asli, yaitu lebar dan tinggi. Pada saat yang sama, karena itu juga merupakan elemen HTML, ia juga dapat menggunakan CSS untuk menentukan lebar dan tinggi. Namun, pastikan untuk mencatat bahwa lebar dan tinggi sendiri berbeda dari lebar dan tinggi yang ditentukan melalui CSS!
Kami menggunakan JS untuk mengubah lebar dan ketinggian kanvas asli, seperti ini:
Canvas.width = 400
Canvas.Height = 300
Tetapi menggunakan JS untuk mengubah lebar dan tinggi kanvas dengan mengoperasikan CSS, seperti ini:
canvas.style.width = '400px'
canvas.style.height = '300px'
Dapat dilihat bahwa perbedaan tata bahasa sangat jelas. Faktanya, perbedaannya lebih jelas.
Apa perbedaan di antara mereka?
Misalnya, untuk lebar kanvas 1000, Anda menggambar garis vertikal di sisi kiri kanvas, lebar 100 piksel. Pada saat ini, Anda mengatur lebar kanvas itu sendiri menjadi 500, yang setara dengan mengklik bagian kanan kanvas, tetapi pada saat ini lebar garis vertikal masih 100.
Tetapi jika Anda menggunakan CSS untuk mengubah lebar kanvas menjadi 500, itu setara dengan mengekstrusi kanvas dari 1000 menjadi 500, sehingga lebar garis vertikal menjadi 50.
(Ini hanyalah situasi teoretis. Ketika benar -benar menetapkan lebar kanvas asli, itu akan menghapus konten yang ditarik.)
Lebar dan tinggi Canvas sendiri adalah atribut dari kanvas itu sendiri, dan lebar dan tinggi yang diberikan oleh CSS dapat dianggap sebagai penskalaan. Jika Anda skala terlalu santai, maka grafik di kanvas mungkin menjadi tidak dapat dikenali oleh Anda.
Jadi ada saran: kecuali dalam keadaan khusus, jangan gunakan CSS untuk menentukan lebar dan tinggi kanvas.
Kanvas memilikinya, dan sekarang kami mengeluarkannya:
var cvs = document.geteLementById ('cvs');
Lihat, itu persis sama dengan mendapatkan elemen lain.
sikat
Sekarang kanvas sudah tersedia, saya ingin mencoret -coretnya, tentu saja saya juga membutuhkan pena. Metode mendapatkan pena adalah sebagai berikut:
var ctx = cvs.getContext ('2d');
Metode GetContext digunakan untuk memegang pena, tetapi ada parameter lain di sini: 2D. Apa artinya ini? Ini dapat dianggap sebagai jenis kuas.
Karena ada 2D, maka akan ada 3D? Mungkin akan ada beberapa di masa depan, tetapi tidak sekarang. Jadi mari kita gunakan pena 2D ini terlebih dahulu.
! Jadi bisakah kita meletakkan beberapa pena lagi? Jawabannya adalah tidak.
Saya ingin mengajukan pertanyaan: Berapa banyak pena yang Anda gunakan pada saat yang sama saat menggambar? Saya percaya bahwa 99,9% orang hanya dapat menggunakannya. Meskipun beberapa tuan seni bela diri seperti Xiaolongnu dapat menggambar dengan kedua tangan pada saat yang sama, ini sangat tidak realistis untuk orang biasa, bukan?
Jadi sekarang Anda bisa merasa lega karena tag HTML5 Canvas juga hanya mendukung menggunakan satu pena secara bersamaan!
Beberapa siswa yang akrab dengan JS mungkin ingin menjadi pintar: Saya menggunakan metode untuk mendapatkan sikat dengan cara sebelumnya untuk mendapatkan beberapa pena lagi, bukankah itu cukup? Lai
Misalnya:
var con = cvs.getContext ('2d');
var ctx = cvs.getContext ('2d');
Hahahaha, tampaknya berhasil. Saya berpikir begitu sebelum tes, tetapi pada kenyataannya, ini hanya ilusi!
Karena saya menemukan bahwa saya mencelupkan salah satu pena dengan tinta merah, dan pena lainnya juga dicelupkan secara otomatis dengan tinta merah! Karena kedua pena itu satu! fuck.
Jika Anda perlu menggambar warna yang berbeda, caranya adalah terus mencelupkan pena unik ini dalam warna baru.
Ini sebenarnya bukan keuntungan, ini adalah cacat, Anda akan mengalaminya di masa depan.
koordinat
Dunia 2d adalah pesawat. Untuk menentukan titik pada pesawat, dua nilai, koordinat X dan koordinat Y diperlukan. Ini adalah konsep dasar yang sangat penting, tetapi karena semua orang telah belajar matematika, saya tidak akan banyak membicarakannya.
Asal usul kanvas adalah sudut kiri atas, sama seperti flash. Tapi yang sangat menjengkelkan adalah bahwa asal matematika adalah sudut kiri bawah. Ini...
lainnya
Canvas memiliki fitur yang berbeda dari kanvas asli, yaitu transparan secara default dan tidak memiliki warna latar belakang. Ini sangat penting sebagian besar waktu.