Mari belajar cara melukis mata dalam JavaScript dalam penyemak imbas.. ia tidak sukar secara teknikal, tetapi hanya untuk mereka yang meraba-raba, dan bagi mereka yang tidak bersedia untuk melukis mata di Internet - ini sudah tentu satu pencapaian keseluruhan.
Terdapat banyak cara untuk menarik mata, mari kita lihat
Menggunakan Unity/Godot/microStudio atau mana-mana daripada beribu-ribu pembina permainan.. mereka semua akan mencipta beberapa kod dalam satu atau lain cara yang akan menjadi JavaScript atau Webassembly, dan masih menunjukkan kepada kami maksudnya.Kami tidak berminat dengan laluan ini.kita tidak akan benar-benar memahami apa yang berlaku, kawalan ke atas kod akan menjadi minimum dan tidak boleh dibaca dalam kod sumber, selain itu adalah besar.
Laluan Jedi ini sedekat mungkin dengan kami, kerana.kod kami tidak akan menjadi besar dan jelas seperti hari, kami tidak akan abstrak banyak, kami tidak akan banyak meningkatkan kod kami dengan perpustakaan.Kawalan kod juga bagus
Ini sudah tentu cara Jedi.Kod ini adalah serumit mungkin, kawalan maksimum bagi perkara yang, seolah-olah, tidak perlu dikawal.Kod sumber adalah yang paling minimum dan dengan pengetahuan JavaScript golimy, kita boleh pergi dengan selamat untuk mendapatkan pekerjaan, kerana.kita memerlukan orang seperti itu.
Tetapi tugas kita bukan untuk mencari kerja, tetapi untuk melukis titik dengan cara yang mudah dan mudah.Vektor kami adalah kelajuan dan fleksibiliti.
Saya memilih perpustakaan
p5js untuk melukis titik.Bukan itu sahaja, sudah tentu, jika tugas itu adalah untuk menarik mata dan itu sahaja, sudah tentu, semuanya perlu dilakukan dalam JavaScript kosong, tetapi saya melakukan ini dalam perspektif, .k.maka anda dan saya akan melakukan perkara lain yang akan kelihatan hebat, dan untuk ini kita memerlukan alat yang baik.Salah satunya ialah p5js.Dalam JavaScript golim, kita perlu mencipta kanvas untuk menentukan fungsi permulaan dan lukisan semula, dalam p5 ini juga dilakukan, tetapi sangat ringkas.
Tapi dulu..
Persediaan Persekitaran Minimum untuk Pembangunan JavaScript
Muat turun
p5.min.js dan simpan sebelah menyebelah.macam ni
index.html
<html>
<head>
<script src="p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body style="margin: 0px;">
<main>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
}
Akibatnya, pelayar anda akan terbuka seperti ini
Nah, HTML boleh difahami, tetapi apakah jenis kod JavaScript ini?
fungsi persediaan adalah pemula, ia dilaksanakan sekali, di dalamnya kita mencipta kanvas, i.e.kawasan di mana kita akan melukis mata.window.innerWidth, window.innerHeight
ialah lebar dan ketinggian skrin, i.e.kami mentakrifkan kanvas skrin penuh dan ya, HTML mempunyai gaya yang sangat penting untuk ini juga
<body style="margin: 0px;">
Kita tidak perlu memulakan apa-apa lagi, kita hanya perlu melukis satu titik.Lihat prinsip di sini .. fungsi seri dilaksanakan, contohnya, 60 kali sesaat, dan 60 kali sesaat kita akan menarik mata kita.. nampaknya ini bodoh, kita hanya perlu melukis mata dan itu ia, tetapi pada masa akan datang ia akan menjadi asas untuk umum semua animasi.
Secara umum, kod untuk melukis titik adalah sangat mudah:
point(10,10)
dan semua!
Walau bagaimanapun, kod kami lebih besar sedikit
background(0);
stroke('white');
strokeWeight(10);
point(window.innerWidth/2,window.innerHeight/2);
latar belakang hitam
bintang putih
ketebalan titik 10
dan kami melukisnya di tengah-tengah menegak dan mendatar.
Nah.. kami melukis titik pada kanvas, semuanya adalah seperti yang sepatutnya, tetapi kami juga boleh melukisnya pada HTML tulen tanpa sebarang JavaScript.. Apakah rupanya?
Ia menjadikannya asas dan lebih mudah, tetapi prinsipnya berbeza sama sekali, berikut ialah kod akhir untuk melukis segi empat sama di tengah skrin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color: black;">
<div style="position: fixed; top: 50%; left: 50%; background-color: white; width: 10px; height: 10px;"></div>
</body>
</html>
Hasilnya hampir sama
Ya, agak mudah untuk melukis sesuatu di tengah dalam HTML, tetapi untuk menambah animasi, dan lebih-lebih lagi interaktif yang waras, anda perlu berfikir mengikut prinsip CSS.Walaupun ia adalah tugas yang agak menarik.Hanya satu perkara asas yang membunuh semua ini, tiada nombor rawak dalam CSS, ini akan membunuh semua percubaan kami pada masa hadapan, itulah sebabnya saya akan kurang memberi keutamaan kepada arah ini.
Jika saya membayangkan bahawa saya mahu membuat langit berbintang pada CSS kosong, maka semuanya tidak akan berjaya untuk saya, keranabintang harus muncul dalam kedudukan rawak, dan jika mereka mempunyai koordinat pra-dicipta, ia tidak akan begitu cantik dan tidak begitu mudah, kerana anda boleh menulis penjana nombor rawak dalam CSS, tetapi kod tersebut akan kelihatan benar-benar hodoh, tidak boleh dibaca dan sukar untuk faham!