JavaScript: нүкте сызыңыз

Браузерде JavaScript-те нүктені салуды үйренейік.. бұл техникалық жағынан қиын емес, тек тайраңдағандар үшін және Интернетте нүкте салуға дайын емес адамдар үшін - бұл, әрине, тұтас жетістік.

Нүкте салудың көптеген жолдары бар, соларды қарастырайық

Ойын құрастырушылары



Unity/Godot/microStudio немесе мыңдаған ойын құрастырушылардың кез келгенін пайдалану.. олардың барлығы JavaScript немесе Webassembly болатын қандай да бір кодты жасайды және әлі де бізге нүктені көрсетеді.Бізді бұл жол қызықтырмайды.біз не болып жатқанын шынымен түсінбейміз, кодты басқару бастапқы кодта минималды және оқылмайтын болады, сонымен қатар ол үлкен.

JavaScript Frameworks

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

Таза JavaScript

Бұл, әрине, Джедидің жолы.Код мүмкіндігінше күрделі, бақылауды қажет етпейтін заттарды максималды бақылау.Бастапқы кодтар ең аз және golimy JavaScript білімі арқылы біз жұмысқа орналасуға қауіпсіз бара аламыз, өйткені.бізге ондай адамдар керек.

Бірақ біздің міндетіміз жұмыс табу емес, қарапайым және оңай жолмен нүкте сызу.Біздің вектор – жылдамдық пен икемділік.

Мен кітапхананы таңдадым

p5js нүкте салу.Бұл жай ғана емес, әрине, егер тапсырма нүктені сызу болса және солай болса, әрине, барлығы JavaScript-те жасалуы керек еді, бірақ мен мұны перспективада жасаймын, .k.содан кейін сіз бен біз керемет көрінетін басқа нәрселерді жасаймыз, бұл үшін бізге жақсы құрал керек.Олардың бірі - p5js.

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

sketch.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 коды?

орнату функциясы - инициализация, ол бір рет орындалады, онда біз кенеп жасаймыз, яғни.нүктені салатын аймақ.window.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