JavaScript: pagdrowing og tulbok

Atong tun-an kung giunsa ang pagdrowing og punto sa JavaScript sa usa ka browser.. dili kini lisud sa teknikal, apan alang lamang sa mga nag-fumble, ug alang niadtong dili andam sa pagdrowing og usa ka punto sa Internet - kini siyempre usa ka tibuok nga kalampusan.

Adunay daghang mga paagi sa pagdrowing og usa ka punto, atong tan-awon kini

Mga tigtukod sa dula



Gamit ang Unity/Godot/microStudio o bisan asa sa liboan ka mga game builder.. silang tanan maghimo ug code sa usa ka paagi o lain nga JavaScript o Webassembly, ug ipakita gihapon nato ang punto.Dili kami interesado niini nga dalan.dili gyud nato masabtan kung unsa ang nahitabo, ang pagkontrol sa code mahimong gamay ug dili mabasa sa source code, gawas pa kini dako.

Mga Framework sa JavaScript

Kini nga dalan sa Jedi mao ang labing duol sa mahimo kanato, tungod kay.ang atong kodigo dili dako ug tin-aw sama sa adlaw, dili kaayo kita mo-abstract, dili na nato madugangan pag-ayo ang atong code sa mga librarya.Maayo usab ang pagkontrol sa code

Putli nga JavaScript

Siyempre kini ang paagi sa Jedi.Ang kodigo kay komplikado kutob sa mahimo, ang pinakataas nga kontrol sa mga butang nga, ingon nga kini, dili kinahanglan nga kontrolon.Ang mga source code mao ang pinakagamay ug uban sa kahibalo sa golimy JavaScript, kita luwas nga moadto aron makakuha og trabaho, tungod kay.kinahanglan nato ang maong mga tawo.

Apan ang among tahas dili ang pagpangita og trabaho, kondili ang pagdrowing og tulbok sa yano ug sayon ​​nga paagi.Ang among vector kay speed ug flexibility.

Gipili nako ang librarya

p5js sa pagdrowing og tulbok.Dili lang kana, siyempre, kung ang buluhaton mao ang pagdrowing og usa ka punto ug mao kana, siyempre, ang tanan kinahanglan nga buhaton sa hubo nga JavaScript, apan gibuhat ko kini sa panglantaw, .k.unya ikaw ug ako mobuhat sa ubang mga butang nga nindot tan-awon, ug alang niini nagkinahanglan kita og maayong himan.Usa niini mao ang p5js.

Sa golim JavaScript, kinahanglan naton maghimo usa ka canvas aron mahibal-an ang pagsugod ug pag-redrawing nga mga gimbuhaton, sa p5 nahimo usab kini, apan mubo kaayo.

Pero una..

Minimum nga Environment Setup para sa JavaScript Development

Pag-download

p5.min.js ug ampingi kini sa usag usa.

ingon ani

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

Kini magbukas sa imong browser sama niini:

Aw, masabtan ang HTML, apan unsa nga matang sa JavaScript code kini?

ang setup function mao ang initialization, kini gipatuman sa makausa, sa niini kita sa paghimo sa usa ka canvas, i.e.dapit diin kita magdrowing ug punto.bintana.innerWidth, bintana.innerHeight

mao ang gilapdon ug gitas-on sa screen, i.e.among gihubit ang usa ka full-screen nga canvas ug oo, ang HTML adunay usa ka importante kaayo nga estilo alang niini usab

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

Dili na kinahanglan nga mag-initialize sa bisan unsa, kinahanglan lang nga magdrowing og tulbok.Tan-awa ang prinsipyo dinhi .. ang pag-drawing function gipatuman, pananglitan, 60 ka beses kada segundo, ug 60 ka beses kada segundo atong i-drawing ang atong punto .. morag kabuang kini, kinahanglan lang nga magdrowing og usa ka punto ug kana. kini, apan sa umaabot kini ang basehan sa kinatibuk-ang tanan nga animation.

Sa kinatibuk-an, ang code sa pagdrowing og punto kay yano ra kaayo:

point(10,10)

ug mao na!

Bisan pa, ang among code mas gamay

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

itom nga background

puti nga bituon

tuldok gibag-on 10

ug gidrowing namo kini sa sentro sa bertikal ug pinahigda.

Aw.. nagdrowing mi ug tulbok sa canvas, ang tanan ingon sa angay, pero mahimo pa gani namo kini idrowing sa lunsay nga HTML nga walay JavaScript.. Unsay hitsura niini?

Gihimo kini nga elementarya ug mas sayon, apan ang mga prinsipyo hingpit nga lahi, ania ang katapusan nga code alang sa pagdrowing og usa ka square sa sentro sa 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 halos pareho

Oo, sayon ​​​​ra ang pagdrowing og usa ka butang sa sentro sa HTML, apan aron makadugang sa mga animation, ug labaw pa sa usa ka maayo nga interactive, kinahanglan ka maghunahuna sumala sa mga prinsipyo sa CSS.Bisan kung kini usa ka makapaikag nga buluhaton.Usa ra ka elementarya nga butang ang nakapatay niining tanan, wala’y mga random nga numero sa CSS, kini makapatay sa tanan namong mga pagsulay sa umaabot, mao nga hatagan nako og gamay nga pagpalabi sa kini nga direksyon.

Kung mahanduraw nako nga gusto nako maghimo usa ka bituon nga kalangitan sa hubo nga CSS, nan ang tanan dili molihok alang kanako, tungod kayAng mga bituon kinahanglan nga makita sa mga random nga posisyon, ug kung sila adunay nabuhat nga mga coordinate, dili kini matahum ug dili kaayo yano, tungod kay mahimo ka magsulat sa usa ka random nga generator sa numero sa CSS, apan ang ingon nga code mahimong tan-awon nga dili maayo, dili mabasa ug lisud sabta!



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