html5 Tutorial lukisan kanvas (1)—Pengetahuan asas kemahiran tutorial drawing_html5

Walaupun semua orang memanggil Canvas sebagai label baharu HTML5, nampaknya Canvas ialah pengetahuan baharu tentang bahasa HTML, tetapi sebenarnya lukisan Kanvas dilakukan melalui JavaScript. Oleh itu, jika anda ingin mempelajari lukisan Kanvas, anda mesti mempunyai asas Javascript.
Selain itu, apabila bercakap tentang lukisan, sentiasa ada beberapa istilah imej dan mata pengetahuan, jadi jika anda mempunyai pengalaman dalam lukisan atau seni, lebih mudah untuk belajar Kanvas.

Kanvas bermaksud kanvas. Kanvas dalam Html5 benar-benar hampir serupa dengan kanvas dalam kehidupan sebenar. Jadi melihatnya sebagai kanvas fizikal boleh mempercepatkan pemahaman.

Kanvas
Untuk melukis dengan kanvas, pertama sekali, anda memerlukan "kanvas". Jika anda tidak mempunyai kanvas dalam rak buku anda, anda boleh membeli gulungan dan meletakkannya di sana. Sudah tentu, kita tidak perlu membelanjakan wang untuk membelinya di halaman web, kita hanya boleh menulis kanvas, sama seperti:

Salin kod

Kodnya adalah seperti berikut:

/canvas>

Teks dalam label adalah untuk penyemak imbas yang tidak menyokong kanvas dan mereka yang menyokongnya tidak akan dapat melihatnya.
Perlu bercakap tentang ciri-ciri kanvas ini Ia mempunyai dua atribut asli, iaitu lebar dan tinggi Pada masa yang sama, kerana ia juga merupakan elemen html, ia juga boleh menggunakan css untuk menentukan lebar dan tinggi. Walau bagaimanapun, berpuluh-puluh juta Sila ambil perhatian: lebar dan ketinggiannya sendiri berbeza daripada lebar dan ketinggian yang ditakrifkan melalui css!
Kami menggunakan JS untuk menukar lebar dan ketinggian Kanvas, seperti ini:

Salin kod

The kod adalah seperti berikut:

canvas.width= 400
canvas.height = 300

Tetapi menggunakan JS untuk menukar lebar dan ketinggian Kanvas dengan mengendalikan CSS adalah seperti ini:

Salin kod

Kod adalah seperti berikut:

kanvas .style.width = '400px'
canvas.style.height = '300px'

Dapat dilihat bahawa perbezaan tatabahasa adalah jelas. Malah perbezaannya lebih jelas.

Apakah perbezaan mereka?
Sebagai contoh, pada kanvas dengan lebar 1000 piksel, anda melukis garis menegak di sebelah kiri kanvas, 100 piksel lebar. Pada masa ini, anda menetapkan lebar kanvas itu sendiri kepada 500, yang bersamaan dengan mengklik pada separuh kanan kanvas, tetapi lebar garis menegak masih 100 pada masa ini.
Tetapi jika anda menukar lebar kanvas kepada 500 melalui CSS, ia bersamaan dengan memerah kanvas daripada 1000 kepada 500, jadi lebar garis menegak menjadi 50.
(Ini hanyalah situasi teori, dalam amalan Apabila menetapkan lebar kanvas, ia akan mengosongkan kandungan yang dilukis )
Lebar dan ketinggian kanvas itu sendiri adalah sifat kanvas itu sendiri, dan lebar dan tinggi yang diberikan oleh css boleh dianggap sebagai. penskalaan. Jika terlalu kasual, grafik pada kanvas mungkin tidak dapat anda kenali.
Jadi, berikut ialah cadangan: Melainkan terdapat keadaan khusus, jangan gunakan css untuk menentukan lebar dan ketinggian Kanvas.
Kanvas ada di sana, sekarang mari kita keluarkan:

Salin kod

Kodnya adalah seperti berikut:

var cvs = document.getElementById('cvs');

Berus

Sekarang dah ada kanvas, kalau nak graffiti di atasnya sudah tentu perlukan pen. Kaedah untuk kanvas untuk mendapatkan pen adalah seperti berikut: var ctx = cvs.getContext('2d'); Kaedah getContext digunakan untuk mendapatkan pen, tetapi terdapat satu lagi parameter di sini: 2d ? Anda boleh lihat Lukisan ini adalah jenis berus. Oleh kerana ada 2D, maka akan ada 3D? Saya rasa akan ada pada masa hadapan, tetapi tidak sekarang. Jadi kita guna pen 2d ni dulu.

Jadi bolehkah kita meletakkan beberapa pen lagi sebagai simpanan? Jawapannya tidak.
Saya ingin bertanya soalan: Berapa banyak pen yang anda gunakan pada masa yang sama semasa melukis? Saya percaya 99.9% orang hanya boleh menggunakan satu Walaupun beberapa ahli seni mempertahankan diri seperti Xiao Longnu boleh melukis dengan dua tangan pada masa yang sama, ini sangat tidak realistik untuk orang biasa, bukan?
Jadi sekarang anda boleh berasa lega, kerana tag kanvas html5 hanya menyokong penggunaan satu pen pada masa yang sama!
Sesetengah pelajar yang lebih biasa dengan menulis JS mungkin mahu bermain helah: Saya boleh menggunakan kaedah sebelumnya untuk mendapatkan berus untuk mendapatkan beberapa pen lagi, bukankah itu cukup? !
Contohnya:

Salin kod

Kodnya adalah seperti berikut:

var con = cvs .getContext('2d');

var ctx = cvs.getContext('2d');
Hahahaha, nampaknya saya fikir begitu sebelum saya mengujinya, tetapi sebenarnya ia hanya ilusi!
Kerana saya mendapati bahawa apabila saya mencelup salah satu pen dalam dakwat merah, pen yang satu lagi secara automatik dicelup dalam dakwat merah! Kerana dua pen itu adalah satu! persetan.
Jika anda perlu melukis warna yang berbeza, caranya ialah dengan terus mencelupkan "pen" ini dalam warna baharu.
Ini sebenarnya bukan kelebihan, tetapi kelemahan, yang anda akan sedar pada masa hadapan.

Koordinat
Dunia 2d ialah satah Untuk menentukan titik pada satah, dua nilai diperlukan, koordinat x dan koordinat y. Ini adalah konsep asas yang sangat penting.
Asal kanvas ialah sudut kiri atas, sama seperti kilat. Tetapi perkara yang menjengkelkan ialah asal dalam matematik adalah sudut kiri bawah. Ini... hanya boleh dikatakan sebagai tabiat

Sesetengah akal asas melukis
Pertama sekali, anda perlu tahu, perubahan koordinat apa yang akan menarik apa garisan? Contohnya, jika koordinat x menjadi lebih besar tetapi koordinat y kekal tidak berubah, garis mendatar boleh dilukis jika koordinat y berubah tetapi koordinat x kekal tidak berubah, garis menegak boleh dilukis.
Sudah tentu, terdapat juga garis miring, garis miring kiri, garis miring kanan, dan lain-lain. Jika anda boleh membandingkannya dengan gambar, kebanyakan orang boleh memahaminya dengan sepintas lalu hanya melukisnya dengan kod, dan anda hanya boleh bergantung pada pemikiran logik keluar.
Jangan risau jika anda berasa keliru tentang garis sekarang, anda secara semula jadi akan memahaminya semasa anda belajar.

Lain-lain
Satu ciri kanvas yang berbeza daripada kanvas sebenar ialah ia lutsinar secara lalai dan tidak mempunyai warna latar belakang. Ini sangat penting pada kebanyakan masa.