Tutorial menggunakan Kanvas dalam HTML5 untuk melukis muka tersenyum

Tutorial menggunakan Kanvas dalam HTML5 untuk melukis muka tersenyum_html5 petua tutorial

WBOY

Lepaskan： 2016-05-16 15:46:44

asal

2396 orang telah melayarinya

201557180008373.jpg (600×436) Hari ini, anda akan mempelajari tentang teknologi web yang dipanggil Canvas dan kaitannya dengan Model Objek Dokumen (biasanya dikenali sebagai DOM). Teknologi ini sangat berkuasa kerana ia membolehkan pembangun web mengakses dan mengubah suai elemen HTML dengan menggunakan JavaScript.

Kini anda mungkin tertanya-tanya mengapa kami perlu menggunakan JavaScript. Ringkasnya, HTML dan JavaScript saling bergantung, dan beberapa komponen HTML, seperti elemen kanvas, tidak boleh digunakan secara bebas daripada JavaScript. Lagipun, apa guna kanvas jika kita tidak boleh melukis di atasnya?

Untuk memahami konsep ini dengan lebih baik, mari cuba lukis wajah tersenyum ringkas melalui contoh projek. Jom mulakan.
Mula

Mulakan dengan mencipta direktori baharu untuk menyimpan fail projek anda, kemudian buka editor teks kegemaran anda atau alat pembangunan web. Sebaik sahaja anda melakukan ini, anda harus mencipta index.html kosong dan script.js kosong, yang akan kami sambung mengedit kemudian.

201557180130749.jpg (600×415)
Seterusnya, mari kita ubah suai fail index.html, yang tidak akan melibatkan banyak kerana kebanyakan kod untuk projek kami akan ditulis dalam JavaScript. Apa yang perlu kita lakukan dalam HTML ialah mencipta elemen kanvas dan skrip rujukan.js, yang agak mudah:

Kod XML/HTMLSalin kandungan ke papan keratan

><badan>
<kanvas id='kanvas' lebar='640' tinggi='480'>kanvas>
<skrip taip='teks/ javascript' src='script.js'>skrip>
badan>html>

Untuk menjelaskan, saya menggunakan set tag < dan < Merebut peluang ini, saya melengkapkan elemen kanvas 640*480 dengan kanvas atribut id.

Atribut ini hanya menambah rentetan pada elemen untuk pengenalan unik Kami akan menggunakan atribut ini kemudian untuk mencari elemen kanvas kami dalam fail JavaScript. Seterusnya, kami merujuk fail JavaScript menggunakan teg yang menentukan jenis bahasa JavaScript dan laluan ke fail script.js.
Memanipulasi DOM

Memandangkan namanya ialah "Model Objek Dokumen", kami perlu mengakses dokumen HTML dengan memanggil antara muka menggunakan bahasa lain Di sini, bahasa yang kami gunakan ialah JavaScript. Untuk melakukan ini, kita perlu meletakkan rujukan mudah pada objek dokumen terbina dalam. Objek ini sepadan terus dengan teg < html kami dan, begitu juga, ia adalah asas bagi keseluruhan projek kerana kami boleh mengakses elemen dan melakukan perubahan melaluinya.

Kod XML/HTMLSalin kandungan ke papan keratan

var kanvas = dokumen.getElementById('canvas'); >

Ingat cara kami menggunakan id="canvas" untuk mentakrifkan elemen kanvas? Kini kami menggunakan kaedah document.getElementById untuk mendapatkan elemen ini daripada dokumen HTML, kami hanya menghantar rentetan yang sepadan dengan id elemen yang diperlukan. Sekarang kita telah memperoleh elemen ini, kita boleh mula melukis dengannya.

Untuk melukis dengan kanvas, kita mesti memanipulasi konteksnya. Anehnya, kanvas tidak mengandungi sebarang kaedah atau sifat untuk melukis, tetapi objek konteksnya mempunyai semua kaedah yang kita perlukan. Takrif konteks kelihatan seperti ini:

Kod XML/HTML

Salin kandungan ke papan keratan

var konteks = kanvas.getContext('2d'); >

Sebelum kita bermula, saya mesti memaklumkan anda bahawa konteks menyimpan dua sifat warna, satu untuk lejang dan satu untuk isian. Untuk wajah senyuman kita, kita perlu menetapkan isian kepada kuning dan berus kepada hitam.

Kod XML/HTML

Salin kandungan ke papan keratan

context.fillStyle

= 'kuning'; context.strokeStyle =
'hitam'
Selepas menetapkan warna yang diperlukan untuk konteks, kita perlu melukis bulatan untuk muka. Malangnya, tiada kaedah yang dipratentukan untuk kalangan dalam konteks, jadi kita perlu menggunakan laluan yang dipanggil. Laluan hanyalah satu siri garisan dan lengkung yang bersambung, dan laluan itu ditutup apabila lukisan selesai.

Kod XML/HTML

Salin kandungan ke papan keratan

context.beginPath();

context.arc(320, 240, 200, 0, 2 * Math.PI context.fill();
context.stroke();
context.closePath();
Dijelaskan dengan cara ini, kami menggunakan konteks untuk memulakan laluan baharu. Seterusnya, kami mencipta arka dengan jejari 200 piksel pada titik (320, 240). Dua parameter terakhir menentukan sudut awal dan akhir untuk membina arka, jadi kami lulus 0 dan 2 *Math.PI untuk mencipta bulatan lengkap. Akhir sekali, kami menggunakan konteks untuk mengisi dan melukis laluan berdasarkan warna yang telah kami tetapkan. Walaupun menutup laluan tidak diperlukan untuk skrip berfungsi, kita masih perlu menutup laluan supaya kita boleh mula melukis mata dan mulut baharu wajah tersenyum itu. Mata boleh dilakukan dengan cara yang sama, setiap mata memerlukan jejari yang lebih kecil dan kedudukan yang berbeza. Tetapi pertama-tama kita perlu ingat untuk menetapkan warna isian kepada putih.

Kod XML/HTML

Salin kandungan ke papan keratan

context.fillStyle = 'putih';
context.beginPath();
context.arc(270, 175, 30, 0, 2 * Math.PI
context.fill();
context.stroke();
context.closePath();
context.beginPath();
context.arc(370, 175, 30, 0, 2 * Math.PI
context.fill();
context.stroke();
context.closePath();

Di atas adalah semua kod untuk mata. Sekarang mulut sangat serupa, tetapi kali ini kita tidak akan mengisi arka, sudut kita akan dikonfigurasikan sebagai separuh bulatan. Untuk melakukan ini, kita perlu menetapkan sudut permulaan kepada sifar dan sudut penamat kepada -1 * Math.PI. Ingat, jangan lupa tetapkan warna berus kepada merah.