Artikel ini terutama memperkenalkan tutorial tentang penggunaan kanvas di HTML5 untuk menggambar wajah yang tersenyum. Menggunakan kanvas untuk menggambar adalah fungsi dasar di HTML5. Teman yang membutuhkannya bisa merujuknya
Hari ini, Anda akan mempelajari teknologi web yang disebut Canvas dan hubungannya dengan model objek dokumen (sering disebut DOM). Teknologi ini sangat kuat karena memungkinkan pengembang web untuk mengakses dan memodifikasi elemen HTML dengan menggunakan JavaScript.
Sekarang Anda mungkin bertanya -tanya mengapa kami perlu menggunakan JavaScript drastis. Singkatnya, HTML dan JavaScript saling bergantung, dan beberapa komponen HTML, seperti elemen kanvas, tidak dapat digunakan sendiri dari JavaScript. Lagi pula, jika kita tidak bisa menggambar di atasnya, apa yang bisa dilakukan kanvas?
Untuk lebih memahami konsep ini, kami akan mencoba menggambar wajah tersenyum sederhana dengan proyek sampel. Mari kita mulai.
awal
Pertama -tama buat direktori baru untuk menyimpan file proyek Anda, dan kemudian buka editor teks favorit Anda atau alat pengembangan web. Setelah Anda melakukan ini, Anda harus membuat index.html kosong dan skrip kosong.js, setelah itu kami akan terus mengedit.
Selanjutnya, mari kita ubah file index.html, yang tidak akan melibatkan banyak hal, karena sebagian besar kode dalam proyek kami akan ditulis dalam JavaScript. Yang perlu kita lakukan di HTML adalah membuat elemen kanvas dan skrip referensi.js, yang cukup mudah:
Kode XML/HTML Salin Konten ke Clipboard