JavaScript: menggambar titik

Mari kita pelajari cara menggambar titik di JavaScript di browser.. secara teknis tidak sulit, tetapi hanya bagi mereka yang gagal, dan bagi mereka yang tidak siap menggambar titik di Internet - ini tentu saja merupakan pencapaian yang utuh.

Ada banyak cara untuk menggambar titik, mari kita lihat

Konstruktor game



Menggunakan Unity/Godot/microStudio atau salah satu dari ribuan pembuat game.. mereka semua akan membuat beberapa kode dalam satu atau lain cara yang akan menjadi JavaScript atau Webassembly, dan tetap menunjukkan intinya.Kami tidak tertarik dengan jalan ini.kita tidak akan benar-benar mengerti apa yang terjadi, kontrol atas kode akan minimal dan tidak dapat dibaca dalam kode sumber, selain itu sangat besar.

Kerangka JavaScript

Jalur Jedi ini sedekat mungkin dengan kita, karena.kode kita tidak akan besar dan jelas seperti siang hari, kita tidak akan banyak mengabstraksi, kita tidak akan banyak meningkatkan kode kita dengan perpustakaan.Kontrol kode juga akan bagus

JavaScript murni

Ini tentu saja cara Jedi.Kodenya serumit mungkin, kendali maksimal atas hal-hal yang seolah-olah tidak perlu dikendalikan.Kode sumber adalah yang paling minim dan dengan pengetahuan tentang JavaScript golimy, kita dapat dengan aman pergi untuk mendapatkan pekerjaan, karena.kita membutuhkan orang-orang seperti itu.

Tapi tugas kita bukan mencari pekerjaan, tapi menggambar titik dengan cara yang sederhana dan mudah.Vektor kami adalah kecepatan dan fleksibilitas.

Saya memilih perpustakaan

p5js untuk menggambar sebuah titik.Bukan hanya itu, tentu saja, jika tugasnya adalah menggambar titik dan hanya itu, tentu saja, semuanya harus dilakukan dalam JavaScript telanjang, tetapi saya melakukan ini dalam perspektif, .k.kemudian Anda dan saya akan melakukan hal-hal lain yang akan terlihat luar biasa, dan untuk ini kita membutuhkan alat yang bagus.Salah satunya adalah p5js.

Dalam JavaScript golim, kita perlu membuat kanvas untuk mendefinisikan fungsi inisialisasi dan menggambar ulang, di p5 ini juga dilakukan, tetapi sangat ringkas.

Tapi pertama-tama..

Pengaturan Lingkungan Minimum untuk Pengembangan JavaScript

Unduh

p5.min.js dan tetap berdampingan.

seperti ini

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);
    }

Ini akan terbuka di browser Anda seperti ini:

Yah, HTML bisa dimengerti, tapi kode JavaScript macam apa ini?

fungsi pengaturan adalah inisialisasi, dijalankan sekali, di dalamnya kami membuat kanvas, mis.daerah di mana kita akan menggambar titik.window.innerWidth, window.innerHeight

adalah lebar dan tinggi layar, mis.kami mendefinisikan kanvas layar penuh dan ya, HTML juga memiliki gaya yang sangat penting untuk ini

<body style="margin: 0px;">

Kita tidak perlu menginisialisasi hal lain, kita hanya perlu menggambar sebuah titik.Lihat prinsipnya di sini .. fungsi draw dijalankan, misalnya 60 kali per detik, dan 60 kali per detik kita akan menggambar titik kita.. sepertinya ini bodoh, kita hanya perlu menggambar titik dan itu saja itu, tetapi di masa depan itu akan menjadi dasar untuk semua animasi secara umum.

Secara umum, kode untuk menggambar sebuah titik sangat sederhana:

point(10,10)

dan itu saja!

Namun, kode kami sedikit lebih besar

  background(0);
  stroke('white');
  strokeWeight(10);
  point(window.innerWidth/2,window.innerHeight/2);

latar belakang hitam

bintang putih

ketebalan titik 10

dan kita menggambarnya di tengah vertikal dan horizontal.

Yah.. kami menggambar titik di kanvas, semuanya seperti yang seharusnya, tapi kami bahkan bisa menggambarnya di HTML murni tanpa JavaScript.. Seperti apa bentuknya?

Itu membuatnya menjadi dasar dan bahkan lebih mudah, tetapi prinsipnya sama sekali berbeda, berikut adalah kode terakhir untuk menggambar persegi di tengah layar

<!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, cukup mudah untuk menggambar sesuatu di tengah dalam HTML, tetapi untuk menambahkan animasi, dan terlebih lagi interaktif yang waras, Anda harus berpikir sesuai dengan prinsip-prinsip CSS.Meskipun itu adalah tugas yang cukup menarik.Hanya satu hal dasar yang membunuh semua ini, tidak ada angka acak dalam CSS, ini akan membunuh semua upaya kami di masa depan, itulah sebabnya saya akan memberikan lebih sedikit preferensi ke arah ini.

Jika saya membayangkan bahwa saya ingin membuat langit berbintang di CSS telanjang, maka semuanya tidak akan berhasil untuk saya, karenabintang akan muncul dalam posisi acak, dan jika mereka memiliki koordinat yang telah dibuat sebelumnya, itu tidak akan begitu indah dan tidak begitu sederhana, karena Anda dapat menulis generator angka acak di CSS, tetapi kode seperti itu akan terlihat sangat jelek, tidak dapat dibaca dan sulit untuk memahami!



bg bs ca ceb co cs cy da de el en eo es et fa fi fr fy ga gd gl gu ha haw hi hmn hr ht hu id ig is it iw ja jw ka kk km kn ko ku ky la lb lo lt lv mg mi mk ml mn mr ms mt my ne nl no ny or pa pl ps pt ro ru rw sd si sk sl sm sn so sr st su sv sw ta te tg th tk tl tr tt ug uk ur uz vi xh yi yo zh zu
Text to speech
QR-Code generator
Parsedown cheatsheet. Markdown
Filter data by column with regular expressions
Engines for creating games on LUA ?
JavaScript: draw a point
JavaScript: Speaking text in Chinese