JavaScript: нокта сызыгыз

Әйдәгез, браузерда JavaScript'та нокта ясарга өйрәник .. бу техник яктан кыен түгел, ләкин егылганнар өчен, һәм Интернетта нокта куярга әзер булмаганнар өчен - бу, әлбәттә, бөтен казаныш.

Нокта ясауның күп ысуллары бар, әйдәгез аларны карыйк

Уен конструкторлары



Бердәмлек / Годот / микроСтудио яки меңләгән уен төзүчеләрнең һәрберсен куллану .. алар барысы да теге яки бу ысул белән JavaScript яки Webassemble булыр, һәм безгә моны күрсәтерләр.Без бу юл белән кызыксынмыйбыз.без нәрсә булганын чыннан да аңламыйбыз, код белән идарә итү минималь һәм чыганак кодында укылмый торган, моннан тыш бик зур.

JavaScript каркаслары

Джединың бу юлы безгә мөмкин кадәр якын, чөнки.безнең кодыбыз көн кебек зур һәм аңлаешлы булмаячак, без күп абстракт ясамыйбыз, китапханәләр белән кодыбызны арттырмыйбыз.Код контроле дә бик яхшы булыр иде

Чиста JavaScript

Бу, әлбәттә, Джеди юлы.Код мөмкин кадәр катлаулы, әйберләрне контрольдә тоту кирәк булмаган әйберләрне максималь контрольдә тоту.Чыганак кодлары минималь һәм голимлы JavaScript белү белән без эшкә куркынычсыз гына бара алабыз, чөнки.безгә андый кешеләр кирәк.

Ләкин безнең бурычыбыз эш эзләү түгел, ә гади һәм җиңел нокта сызу.Безнең вектор тизлек һәм сыгылучылык.

Мин китапханәне сайладым

p5js нокта ясарга.Әлбәттә, бу алай гына да түгел, әгәр бирем нокта сызу булса һәм ул, әлбәттә, барысы да ялангач JavaScript белән эшләнергә тиеш иде, ләкин мин моны перспективада эшлим, .k.аннары сез һәм мин гаҗәп күренерлек башка әйберләр эшләячәкбез, һәм моның өчен безгә яхшы корал кирәк.Аларның берсе - p5js.

Голим JavaScript'та инициализация һәм яңадан сызу функцияләрен билгеләү өчен картиналар ясарга кирәк, p5'та бу да эшләнә, ләкин бик кыска.

Ләкин башта ..

JavaScript үсеше өчен минималь мохит урнаштыру

Йөкләү

p5.min.js һәм аны янәшә саклагыз.

моның кебек

index.html

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

эскиз.js

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

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

Нәтиҗәдә, сезнең браузер шулай ачылачак

Хәер, HTML аңлашыла, ләкин бу нинди JavaScript коды?

көйләү функциясе инициализация, ул бер тапкыр башкарыла, анда без киндер ясыйбыз, ягъни.нокта ясый торган өлкә.windows.innerWidth, window.innerHeight

экранның киңлеге һәм биеклеге, ягъни.без тулы экранлы картинаны билгелибез, әйе, HTML да моның өчен бик мөһим стильгә ия

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

Безгә бүтәннәрне башларга кирәк түгел, нокта ясарга кирәк.Монда принципка карагыз .. тарту функциясе башкарыла, мәсәлән, секундына 60 тапкыр, һәм секундына 60 тапкыр без үз фикеребезне ясарбыз .. бу ахмаклык кебек тоела, безгә нокта ясарга кирәк һәм бу ул, ләкин киләчәктә ул барлык анимация өчен нигез булачак.

Гомумән, нокта сызу коды бик гади:

point(10,10)

һәм барысы да!

Ләкин, безнең код бераз зуррак

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

фон кара

ак йолдыз

нокта калынлыгы 10

һәм без аны вертикаль һәм горизонталь уртасында ясыйбыз.

Хәер .. без киндергә нокта сыздык, барысы да шулай булырга тиеш, ләкин без аны JavaScriptсыз саф HTMLда ясый алабыз .. Нинди булыр иде?

Бу аны башлангыч һәм тагын да җиңеләйтә, ләкин принциплар бөтенләй башка, монда экран уртасында квадрат сызуның соңгы коды.

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

Нәтиҗә бер үк диярлек

Әйе, HTMLда үзәктә нәрсәдер ясау бик җиңел, ләкин анимацияләр өстәү өчен, хәтта акыллы интерактив, CSS принциплары буенча уйларга туры киләчәк.Бу бик кызык эш булса да.Бары тик бер башлангыч әйбер боларның барысын да үтерә, CSSда очраклы саннар юк, бу киләчәктә безнең барлык омтылышларыбызны үтерәчәк, шуңа күрә мин бу юнәлешкә азрак өстенлек бирермен.

Әгәр дә мин ялангач CSS-та йолдызлы күк ясарга телим икән, минем өчен барысы да эшләмәячәк, чөнкийолдызлар очраклы позициядә күренергә тиеш, һәм аларда алдан ясалган координаталар булса, ул бик матур һәм гади булмас, чөнки сез CSS'да очраклы сан генераторын яза аласыз, ләкин мондый код бөтенләй ямьсез, укылмый торган һәм авыр булыр. аңла!



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