JavaScript: ngagambar titik

Hayu urang diajar kumaha ngagambar titik dina JavaScript dina browser a.. teu téhnisna hésé, tapi ngan pikeun maranéhanana anu fumble, sarta pikeun maranéhanana anu teu disusun ngagambar titik dina Internet - ieu téh tangtu sakabeh prestasi.

Aya seueur cara pikeun ngagambar titik, hayu urang tingali

Konstruktor kaulinan



Ngagunakeun Unity / Godot / microStudio atawa salah sahiji rébuan tukang kaulinan .. aranjeunna sadayana bakal nyieun sababaraha kode dina hiji atawa cara sejen nu bakal JavaScript atanapi Webassembly, sarta masih nembongkeun kami titik.Kami henteu kabetot dina jalur ieu.urang moal bener ngartos naon anu lumangsung, kontrol leuwih kode bakal minimal na unreadable dina kode sumber, sagigireun éta badag.

Frameworks JavaScript

jalur ieu Jedi sacaket mungkin ka urang, sabab.kode urang moal badag tur jelas sakumaha beurang, urang moal abstrak loba, urang moal greatly ningkatkeun kode urang jeung perpustakaan.Kontrol kode bakal saé ogé

JavaScript murni

Ieu tangtu jalan Jedi.Kodeu sakumaha pajeulit mungkin, kontrol maksimum hal-hal anu, saolah-olah, henteu kedah dikontrol.Kodeu sumber anu paling minimal jeung pangaweruh ngeunaan golimy JavaScript, urang ngan bisa aman balik pikeun meunangkeun pakasaban, sabab.urang peryogi jalma sapertos kitu.

Tapi tugas urang teu neangan pakasaban, tapi ngagambar titik dina cara basajan tur gampang.Vektor kami nyaéta laju sareng kalenturan.

Kuring milih perpustakaan

p5js ngagambar titik.Ieu mah sakadar éta, tangtosna, lamun tugas éta ngagambar titik sarta éta, tangtu, sagalana bakal kudu dipigawé dina JavaScript bulistir, tapi Kuring ngalakonan ieu dina sudut pandang, .k.teras anjeun sareng kuring bakal ngalakukeun hal-hal sanés anu bakal katingali endah, sareng pikeun ieu kami peryogi alat anu saé.Salah sahijina nyaéta p5js.

Dina golim JavaScript, urang kudu nyieun hiji kanvas keur ngartikeun initialization na redrawing fungsi, dina p5 ieu dipigawé teuing, tapi pisan concisely.

Tapi ke heula..

Setup Lingkungan Minimum pikeun Pangwangunan JavaScript

Ngundeur

p5.min.js sarta tetep sisi ku samping.

resep ieu

index.html

    <html>
    <head>
        <script src="p5.min.js"></script>
        <script src="sketch.js"></script>
    </head>
    <body style="margin: 0px;">
        <main>
        </main>
    </body>
    </html>

sketsa.js

    function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
    }

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

Hasilna, panyungsi anjeun bakal muka sapertos kieu

Nya, HTML tiasa kaharti, tapi naon jinis kode JavaScript ieu?

fungsi setelan nyaeta initialization, eta dieksekusi sakali, di dinya urang nyieun kanvas, i.e.wewengkon dimana urang bakal ngagambar titik.window.innerWidth, window.innerHeight

nyaeta lebar jeung jangkungna layar, i.e.urang nangtukeun hiji kanvas layar pinuh na enya, HTML ngabogaan gaya pohara penting pikeun ieu teuing

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

Больше инициализировать нам ничего не надо,а просто надо нарисовать точку. Тут смотрите какой принцип.. функция draw выполняется например 60 раз в секунду, и 60 раз в секунду мы будем рисовать нашу точку.. казалось бы что это тупо, нам же просто точку надо нарисовать и все, но в дальнейшем это будет основа вообще для всей анимации.

Вообще код рисования точки крайне прост:

point(10,10)

и все !

Однако наш код немного больше

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

фон черный

звезда белая

толщина точки 10

и рисуем мы ее по центру вертикали и горизонтали.

Что же.. мы нарисовали точку на канвасе, все как полагается, но но мы могли вообще нарисовать ее и на чистом HTML без всяких JavaScript.. Как это бы выглядело ?

Делает это элементарно и даже проще, но принципы совсем другие, вот конечный код рисования уже квадратика в центре экрана

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

Результат почти тот же

Sumuhun, éta rada gampang ngagambar hal di puseur dina HTML, tapi dina raraga pikeun nambahkeun animasi, komo leuwih ti interaktif waras, Anjeun kudu mikir nurutkeun prinsip CSS.Sanajan éta tugas rada metot.Ngan hiji hal dasar maéhan sakabéh ieu, euweuh angka acak dina CSS, ieu bakal maéhan sakabéh usaha urang dina mangsa nu bakal datang, naha kuring bakal masihan kirang leuwih sering dipake tinimbang arah ieu.

Mun kuring ngabayangkeun yen Abdi hoyong ngadamel langit starry on CSS bulistir, lajeng sagalana moal dianggo kaluar pikeun kuring, sababbéntang kedah muncul dina posisi acak, sarta lamun maranéhna geus pre-dijieun koordinat, éta moal jadi geulis tur teu jadi basajan, sabab anjeun bisa nulis angka generator acak dina CSS, tapi kode sapertos bakal kasampak lengkep awon, unreadable tur teuas. ngarti!



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