Tutorial Menggambar Kanvas HTML5 (1) - Pengetahuan Dasar Menggambar

Meskipun semua orang menyebut Canvas tag baru untuk html5/"> html5, tampaknya kanvas milik pengetahuan baru tentang bahasa HTML, tetapi pada kenyataannya, gambar kanvas dilakukan melalui JavaScript. Oleh karena itu, jika Anda ingin belajar menggambar 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.

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:

<Canvas ID = "CVS"> Browser Anda tidak mendukung Canvas </ Canvas>

Teks dalam tag adalah untuk browser yang tidak mendukung kanvas, dan yang didukung tidak akan pernah terlihat.

Penting untuk menyebutkan karakteristik kanvas ini. Ini 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 memperhatikan: lebar dan tinggi badannya sendiri berbeda dari lebar dan tinggi yang ditentukan melalui CSS!

Kami menggunakan JS untuk mengubah lebar dan tinggi kanvas, 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.

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 hanya situasi teoretis. Ketika benar -benar mengatur lebar kanvas, 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.

Sekarang kanvas tersedia, saya ingin mencoret -coretnya, tentu saja saya juga membutuhkan pena. Metode mendapatkan pena adalah sebagai berikut:

var ctx = cvs.getContext ('2d'); di mana 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 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 kuas 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.

Dunia 2d adalah pesawat. Untuk menentukan titik pada pesawat, dua nilai, koordinat X dan koordinat Y diperlukan. Ini adalah konsep dasar yang sangat penting.

Asal usul kanvas adalah sudut kiri atas, sama seperti flash. Tapi yang sangat menjengkelkan adalah bahwa asal matematika adalah sudut kiri bawah. Ini...

Pertama -tama, Anda perlu tahu perubahan koordinat seperti apa yang akan menarik garis apa? Misalnya, jika koordinat x menjadi lebih besar dan koordinat Y tetap tidak berubah, garis horizontal dapat ditarik; Jika Y koordinat berubah tetapi koordinat x tetap tidak berubah, garis vertikal dapat ditarik.

Tentu saja, ada juga garis diagonal, garis diagonal kiri dan garis diagonal kanan. Jika Anda dapat membandingkan gambar, kebanyakan orang dapat memahaminya sekaligus; Lebih menyedihkan untuk menggambar dengan kode, dan Anda hanya bisa memikirkannya melalui pemikiran logis.

Jika Anda merasa bingung tentang garis sekarang, jangan khawatir, Anda secara alami akan memahaminya selama proses pembelajaran.

Canvas memiliki fitur yang berbeda dari kanvas asli, yaitu transparan secara default dan tidak memiliki warna latar belakang. Ini sangat penting sebagian besar waktu.