JavaScript: bir nokta çizin

Bir tarayıcıda JavaScript'te nasıl nokta çizileceğini öğrenelim.. teknik olarak zor değil, sadece beceriksiz olanlar ve internette bir nokta çizmeye hazır olmayanlar için - bu elbette tam bir başarı.

Bir nokta çizmenin birçok yolu var, onlara bakalım

Oyun kurucuları



Unity/Godot/microStudio veya binlerce oyun kurucudan herhangi birini kullanarak.. hepsi bir şekilde JavaScript veya Webassembly olacak bir kod oluşturacaklar ve yine de bize noktayı gösterecekler.Bu yol bizi ilgilendirmiyor.ne olduğunu gerçekten anlamayacağız, kod üzerindeki kontrol çok az ve kaynak kodda okunamaz olacak, ayrıca çok büyük.

JavaScript Çerçeveleri

Jedi'ların bu yolu bize mümkün olduğunca yakın çünkü.kodumuz gün geçtikçe geniş ve net olmayacak, çok soyutlamayacağız, kütüphanelerle kodumuzu çok büyütmeyeceğiz.Kod kontrolü de harika olurdu

Saf JavaScript

Bu elbette Jedi'ların yolu.Kod mümkün olduğu kadar karmaşıktır, kontrol edilmesi gerekmeyen şeylerin maksimum kontrolü.Kaynak kodları en asgari düzeydedir ve çok iyi JavaScript bilgisi ile, güvenle bir iş bulmaya gidebiliriz, çünkü.böyle insanlara ihtiyacımız var.

Ama bizim işimiz iş bulmak değil, basit ve kolay bir şekilde nokta çizmek.Vektörümüz hız ve esnekliktir.

kütüphaneyi seçtim

p5js bir nokta çizmek için.Tabii ki sadece bu değil, eğer görev bir nokta çizmekse ve bu kadar, elbette, her şey çıplak JavaScript ile yapılmalıydı, ama bunu perspektiften yapıyorum, .k.o zaman sen ve ben harika görünecek başka şeyler yapacağız ve bunun için iyi bir araca ihtiyacımız var.Bunlardan biri p5js.

golim JavaScript'te, başlatma ve yeniden çizme işlevlerini tanımlamak için bir tuval oluşturmamız gerekiyor, p5'te bu da yapılır, ancak çok kısa.

Ama önce..

JavaScript Geliştirme için Minimum Ortam Kurulumu

İndirmek

p5.min.js ve yan yana tutun.

bunun gibi

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

Sonuç olarak tarayıcınız bu şekilde açılacaktır.

Peki, HTML anlaşılabilir, ancak bu ne tür bir JavaScript kodudur?

kurulum işlevi başlatmadır, bir kez yürütülür, içinde bir tuval oluştururuz, yani.bir nokta çizeceğimiz alan.window.innerWidth, window.innerHeight

ekranın genişliği ve yüksekliğidir, yani.tam ekran bir tuval tanımlıyoruz ve evet, HTML'nin bunun için de çok önemli bir stili var

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

Başka bir şey başlatmamıza gerek yok, sadece bir nokta çizmemiz gerekiyor.Buradaki prensibe bakın .. çekme işlevi yürütülüyor, örneğin saniyede 60 kez ve saniyede 60 kez noktamızı çizeceğiz .. bu aptalca görünüyor, sadece bir nokta çizmemiz gerekiyor ve bu kadar ama gelecekte genel tüm animasyonların temeli olacak.

Genel olarak, bir nokta çizme kodu son derece basittir:

point(10,10)

ve tüm!

Ancak, kodumuz biraz daha büyük

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

arka plan siyah

Beyaz Yıldız

nokta kalınlığı 10

ve onu dikey ve yatayın ortasına çiziyoruz.

Pekala.. Tuval üzerine bir nokta çizdik, her şey olması gerektiği gibi, ama onu JavaScript kullanmadan saf HTML'ye bile çizebiliriz.. Nasıl görünürdü?

Temel ve daha da kolay hale getirir, ancak ilkeler tamamen farklıdır, işte ekranın ortasına bir kare çizmenin son kodu

<!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>

Sonuç hemen hemen aynı

Evet, HTML'de merkeze bir şeyler çizmek oldukça kolaydır, ancak animasyonlar eklemek ve hatta daha akıllıca bir interaktif eklemek için CSS ilkelerine göre düşünmeniz gerekecek.Oldukça ilginç bir görev olmasına rağmen.Sadece bir temel şey tüm bunları öldürür, CSS'de rastgele sayılar yoktur, bu gelecekteki tüm girişimlerimizi öldürür, bu yüzden bu yönü daha az tercih edeceğim.

Çıplak CSS'de yıldızlı bir gökyüzü yapmak istediğimi hayal edersem, o zaman her şey benim için işe yaramaz, çünküyıldızlar rastgele konumlarda görünmelidir ve önceden oluşturulmuş koordinatları varsa, çok güzel ve çok basit olmayacak, çünkü CSS'de rastgele bir sayı üreteci yazabilirsiniz, ancak bu tür kod tamamen çirkin, okunamaz ve zor görünecektir. anlamak!



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