Браузерде JavaScript-те нүктені салуды үйренейік.. бұл техникалық жағынан қиын емес, тек тайраңдағандар үшін және Интернетте нүкте салуға дайын емес адамдар үшін - бұл, әрине, тұтас жетістік.
Нүкте салудың көптеген жолдары бар, соларды қарастырайық
Unity/Godot/microStudio немесе мыңдаған ойын құрастырушылардың кез келгенін пайдалану.. олардың барлығы JavaScript немесе Webassembly болатын қандай да бір кодты жасайды және әлі де бізге нүктені көрсетеді.Бізді бұл жол қызықтырмайды.біз не болып жатқанын шынымен түсінбейміз, кодты басқару бастапқы кодта минималды және оқылмайтын болады, сонымен қатар ол үлкен.
Джедидің бұл жолы бізге барынша жақын, өйткені.біздің кодымыз күн сияқты үлкен және түсінікті болмайды, біз көп дерексіз болмаймыз, кітапханалармен кодымызды айтарлықтай арттырмаймыз.Кодты бақылау да тамаша болар еді
Бұл, әрине, Джедидің жолы.Код мүмкіндігінше күрделі, бақылауды қажет етпейтін заттарды максималды бақылау.Бастапқы кодтар ең аз және 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-де кездейсоқ сандар генераторын жаза аласыз, бірақ мұндай код мүлдем ұнамсыз, оқылмайтын және қиын көрінеді. түсін!