JavaScript: sawir dhibic

Aynu baranno sida loo sawiro barta JavaScript ee browserka .. farsamo ahaan maaha mid adag, laakiin kaliya kuwa boodboodaya, iyo kuwa aan diyaar u ahayn inay sawiraan dhibic internetka - tani waa dabcan guul dhan.

Waxaa jira siyaabo badan oo lagu sawiri karo dhibic, aan eegno iyaga

Ciyaar dhiska



Isticmaalka Midnimada / Godot / microStudio ama mid ka mid ah kumanaanka wax dhisa .. Dhammaantood waxay u abuuri doonaan qaar ka mid ah koodka hal hab ama mid kale oo noqon doona JavaScript ama Webassembly, oo weli na tusaya barta.Dariiqan kuma danaynayno.run ahaantii ma fahmi doono waxa dhacaya, xakamaynta koodhka ayaa noqon doona mid aad u yar oo aan la akhrin karin koodhka isha, ka sokow waa weyn.

Qaab-dhismeedka JavaScript

Jidkaan Jedi waa sida ugu dhow ee suurtogalka ah annaga, sababtoo ah.Xeerkayagu ma noqon doono mid weyn oo cad sida maalinta, ma noqon doono wax badan oo la taaban karo, si weyn uma kordhin doono koodkayaga maktabadaha.Xakamaynta koodkuna aad bay u fiicnaan lahayd

JavaScript saafi ah

Tani waa dabcan habka Jedi.Koodhku waa sida ugu adag ee suurtogalka ah, xakamaynta ugu badan ee walxaha, sida ay ahayd, uma baahna in la xakameeyo.Koodhadhka isha ayaa ah kuwa ugu yar iyo aqoonta golimy JavaScript, waxaan si badbaado leh u aadi karnaa si aan shaqo u helno, sababtoo ah.waxaan u baahanahay dadka noocaas ah.

Laakiin shaqadeenu maaha in aan shaqo raadsano, balse waa in aan dhibco ku sawirno hab fudud oo fudud.Xakamayntayadu waa xawaare iyo dabacsanaan.

Waxaan doortay maktabadda

p5js si loo sawiro dhibic.Taasi kaliya maahan, dabcan, haddii hawshu ay tahay in la sawiro dhibic waana taas, dabcan, wax walba waa in lagu sameeyaa JavaScript qaawan, laakiin tan waxaan u sameynayaa dhinaca, .k.ka dib aniga iyo adiga waxaan sameyn doonaa waxyaabo kale oo u muuqan doona cajiib, tan waxaan u baahanahay qalab wanaagsan.Mid ka mid ah waa p5js.

Golim JavaScript, waxaan u baahanahay inaan abuurno shiraac si loo qeexo bilowga iyo dib u habeynta howlaha, p5 tan sidoo kale waa la sameeyaa, laakiin si kooban.

Laakin marka hore..

Dejinta Deegaanka Ugu Yar ee Horumarinta JavaScript

Download

p5.min.js oo dhinac u dhig.

sida tan

index.html

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

sawiro.js

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

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

Natiijo ahaan, browserkaagu wuxuu u furmi doonaa sidan

Hagaag, HTML waa la fahmi karaa, laakiin waa maxay nooca JavaScript code kani?

shaqada habayntu waa bilawga, waxa la fuliyaa hal mar, waxa aanu ku abuurnaa shiraac, i.e.aagga aan ku sawiri doonno.window.innerWidth, window.innerHeight

waa ballaca iyo dhererka shaashadda, i.e.waxaanu qeexaynaa sharaca shaashadda oo dhan iyo haa, HTML-ku wuxuu leeyahay qaab aad muhiim u ah kan sidoo kale

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

Uma baahnid inaan wax kale bilowno, kaliya waxaan u baahanahay inaan sawiro dhibic.Fiiri mabda'a halkan. waa, laakiin mustaqbalka waxay noqon doontaa saldhigga guud ee dhammaan animation.

Guud ahaan, koodka sawirka dhibicda aad buu u fudud yahay:

point(10,10)

iyo dhammaan!

Si kastaba ha ahaatee, koodkayaga ayaa xoogaa ka weyn

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

asalka madow

xiddig cad

dhumucda dhibicda 10

waxaana ku sawirnaa dhexda toosan iyo toosan.

Hagaag .. waxaan ku sawirnay dhibco shiraac ah, wax walba waa sidii ay ahayd, laakiin waxaan xitaa ku sawiri karnaa HTML saafi ah iyada oo aan wax JavaScript ah.. Sidee ayay u ekaan doontaa?

Waxay ka dhigtaa dugsi hoose iyo xitaa sahlan, laakiin mabaadi'da ayaa si buuxda u kala duwan, halkan waa code-ka ugu dambeeya ee lagu sawirayo labajibbaaran ee bartamaha shaashadda.

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

Natiijadu waxay ku dhowdahay isku mid

Haa, way fududahay in wax lagu sawiro bartamaha HTML, laakiin si loogu daro animations, iyo xitaa si ka sii badan isdhexgalka miyir-qabka ah, waa inaad ka fikirtaa mabaadi'da CSS.Inkastoo ay tahay hawl aad u xiiso badan.Kaliya hal shay ayaa dila waxaas oo dhan, ma jiraan tirooyin random ah oo ku jira CSS, tani waxay dili doontaa dhammaan isku dayadayada mustaqbalka, taas oo ah sababta aan doorbidi doono jihadan.

Haddii aan qiyaaso inaan rabo inaan samada xiddigta leh ku sameeyo CSS qaawan, markaa wax walba aniga iima shaqeyn doonaan, sababtoo ahxiddiguhu waa inay ka soo muuqdaan jagooyin aan kala sooc lahayn, iyo haddii ay leeyihiin isku-duwayaasha horay loo abuuray, ma noqon doonto mid aad u qurux badan oo aan fududayn, sababtoo ah waxaad ku qori kartaa koronto-dhaliye lambareed ee CSS, laakiin koodka noocan oo kale ah wuxuu u eegi doonaa gebi ahaanba fool xun, aan la akhrin karin oo adag. fahan!



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