JavaScript: gumuhit ng tuldok

Alamin natin kung paano gumuhit ng isang punto sa JavaScript sa isang browser.. hindi ito mahirap sa teknikal, ngunit para lamang sa mga nangungulit, at para sa mga hindi handang gumuhit ng isang punto sa Internet - ito ay siyempre isang buong tagumpay.

Mayroong maraming mga paraan upang gumuhit ng isang punto, tingnan natin ang mga ito

Mga tagabuo ng laro



Gamit ang Unity/Godot/microStudio o alinman sa libu-libong tagabuo ng laro.. lahat sila ay gagawa ng ilang code sa isang paraan o iba pa na magiging JavaScript o Webassembly, at ipapakita pa rin sa amin ang punto.Hindi kami interesado sa landas na ito.hindi talaga namin mauunawaan kung ano ang nangyayari, ang kontrol sa code ay magiging minimal at hindi nababasa sa source code, bukod sa ito ay napakalaki.

Mga Framework ng JavaScript

Ang landas na ito ng Jedi ay mas malapit hangga't maaari sa amin, dahil.ang aming code ay hindi magiging malaki at malinaw bilang araw, hindi kami mag-abstract ng marami, hindi namin lubos na tataas ang aming code sa mga aklatan.Ang kontrol ng code ay magiging mahusay din

Purong JavaScript

Ito ay siyempre ang paraan ng Jedi.Ang code ay kasing kumplikado hangga't maaari, ang pinakamataas na kontrol sa mga bagay na, tulad noon, ay hindi kailangang kontrolin.Ang mga source code ay ang pinaka-minimal at may kaalaman sa golimy JavaScript, maaari lang tayong ligtas na makapunta upang makakuha ng trabaho, dahil.kailangan natin ang mga ganyang tao.

Ngunit ang aming gawain ay hindi upang makahanap ng trabaho, ngunit upang gumuhit ng isang tuldok sa isang simple at madaling paraan.Ang aming vector ay bilis at flexibility.

Pinili ko ang library

p5js para gumuhit ng tuldok.Hindi lang iyon, siyempre, kung ang gawain ay gumuhit ng isang punto at iyon lang, siyempre, ang lahat ay kailangang gawin sa hubad na JavaScript, ngunit ginagawa ko ito sa pananaw, .k.pagkatapos ikaw at ako ay gagawa ng iba pang mga bagay na mukhang kamangha-manghang, at para dito kailangan namin ng isang mahusay na tool.Isa sa mga ito ay p5js.

Sa golim JavaScript, kailangan naming lumikha ng isang canvas upang tukuyin ang pagsisimula at pag-redrawing ng mga function, sa p5 ginagawa din ito, ngunit napaka-concisely.

Pero una..

Minimum na Environment Setup para sa JavaScript Development

I-download

p5.min.js at panatilihin itong magkatabi.

ganito

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

Bilang resulta, magbubukas ang iyong browser nang ganito

Well, ang HTML ay naiintindihan, ngunit anong uri ng JavaScript code ito?

ang pag-andar ng pag-setup ay pagsisimula, ito ay isinasagawa nang isang beses, sa loob nito ay lumikha kami ng isang canvas, i.e.lugar kung saan bubunot tayo ng punto.window.innerWidth, window.innerHeight

ay ang lapad at taas ng screen, i.e.tinutukoy namin ang isang full-screen na canvas at oo, ang HTML ay may napakahalagang istilo para dito

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

Hindi na natin kailangang mag-initialize ng iba, kailangan lang nating gumuhit ng tuldok.Tingnan ang prinsipyo dito .. ang pag-andar ng pagguhit ay naisakatuparan, halimbawa, 60 beses bawat segundo, at 60 beses bawat segundo ay iguguhit namin ang aming punto. ito, ngunit sa hinaharap ito ang magiging batayan para sa pangkalahatan sa lahat ng animation.

Sa pangkalahatan, ang code para sa pagguhit ng isang punto ay napakasimple:

point(10,10)

at lahat!

Gayunpaman, ang aming code ay bahagyang mas malaki

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

itim ang background

puting bituin

kapal ng tuldok 10

at iginuhit namin ito sa gitna ng patayo at pahalang.

Buweno.. gumuhit kami ng isang tuldok sa canvas, lahat ay tulad ng nararapat, ngunit maaari pa nga namin itong iguhit sa purong HTML nang walang anumang JavaScript.. Ano ang magiging hitsura nito?

Ginagawa nitong elementarya at mas madali, ngunit ang mga prinsipyo ay ganap na naiiba, narito ang pangwakas na code para sa pagguhit ng isang parisukat sa gitna ng screen

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

Ang resulta ay halos pareho

Oo, medyo madaling gumuhit ng isang bagay sa gitna sa HTML, ngunit upang magdagdag ng mga animation, at higit pa sa isang matalinong interactive, kailangan mong mag-isip ayon sa mga prinsipyo ng CSS.Bagaman ito ay medyo isang kawili-wiling gawain.Isang elementarya lamang ang pumapatay sa lahat ng ito, walang mga random na numero sa CSS, papatayin nito ang lahat ng aming mga pagtatangka sa hinaharap, kaya naman mas kaunting pipiliin ko ang direksyong ito.

Kung naisip ko na gusto kong gumawa ng isang mabituing kalangitan sa hubad na CSS, kung gayon ang lahat ay hindi gagana para sa akin, dahildapat lumitaw ang mga bituin sa mga random na posisyon, at kung mayroon silang mga paunang nilikha na mga coordinate, hindi ito magiging napakaganda at hindi gaanong simple, dahil maaari kang magsulat ng isang random na generator ng numero sa CSS, ngunit ang naturang code ay magmumukhang ganap na pangit, hindi nababasa at mahirap intindihin!



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