JavaScript: нарисувайте точка

Нека се научим как да нарисуваме точка в JavaScript в браузър.. не е технически трудно, но само за тези, които бъркат, и за тези, които не са подготвени да нарисуват точка в интернет - това разбира се е цяло постижение.

Има много начини за начертаване на точка, нека ги разгледаме

Конструктори на игри



Използвайки Unity/Godot/microStudio или някой от хилядите конструктори на игри.. всички те ще създадат някакъв код по един или друг начин, който ще бъде JavaScript или Webassembly, и все пак ще ни покажат смисъла.Този път не ни интересува.няма да разберем наистина какво се случва, контролът върху кода ще бъде минимален и нечетлив в изходния код, освен това е огромен.

JavaScript Frameworks

Този път на джедаите е възможно най-близък до нас, т.к.нашият код няма да е голям и ясен като бял ден, няма да абстрахираме много, няма да увеличим много кода си с библиотеки.Контролът на кода също би бил чудесен

Чист JavaScript

Това разбира се е пътят на джедаите.Кодът е възможно най-сложен, максималният контрол на нещата, които сякаш не трябва да бъдат контролирани.Изходните кодове са най-минимални и със знанието на golimy JavaScript, можем спокойно да отидем да си намерим работа, т.к.имаме нужда от такива хора.

Но нашата задача не е да си намерим работа, а да нарисуваме точка по прост и лесен начин.Нашият вектор е бързина и гъвкавост.

Избрах библиотеката

p5js да нарисувам точка.Не е само това, разбира се, ако задачата беше да се начертае точка и това е всичко, разбира се, всичко ще трябва да се направи в гол JavaScript, но аз правя това в перспектива, .k.тогава ти и аз ще направим други неща, които ще изглеждат невероятно, а за това се нуждаем от добър инструмент.Един от тях е p5js.

В golim JavaScript трябва да създадем canvas, за да дефинираме функциите за инициализация и преначертаване, в 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

и го рисуваме в центъра на вертикала и хоризонтала.

Е.. нарисувахме точка върху платното, всичко е както трябва да бъде, но дори бихме могли да го нарисуваме на чист HTML без никакъв JavaScript.. Как би изглеждало?

Това го прави елементарно и дори по-лесно, но принципите са напълно различни, ето крайния код за рисуване на квадрат в центъра на екрана

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