Давайте научимся рисовать точку на JavaScript в браузере.. это технически не сложно, но только для тех кто шарит, а для тех кто не подготовлен нарисовать точку в интернете - это конечно целое достижение.
Есть масса путей рисования точки, давайте рассмотрим их
Используя Unity/Godot/microStudio или любой из тысяч конструкторов игр.. все они создадут так или иначе некий код который будет JavaScript или Webassembly, и таки покажет нам точку. Нас данный путь не интересует т.к. мы не особо поймем что происходит, контроль над кодом будет минимальным и в исходниках нечитаем, к тому же огромный.
Данный путь джедая максимально приближен к нам, т.к. код наш будет не большим и ясным как день, мы не сильно абстрагируемся, не сильно увеличим наш код библиотеками. Контроль над кодом тоже будет прекрасным
Это конечно путь джедая. Код максимально сложен, максимальный контроль вещей которых как бы и контролировать не надо. Исходники самые минимальные и со знаниями голимого JavaScript мы просто можем смело идти устраиваться на работу,т.к. такие люди нам нужны..
Но наша задаче не найти работу, а нарисовать точку простым и легким способом. Наш вектор это скорость и гибкость.
Я выбрал библиотеку
p5js что бы нарисовать точку. Не просто так конечно, если бы задача стояла рисовать точку и все, конечно надо было бы все сделать на голом JavaScript, но я делаю это перспективу, .к. потом мы с вами будем делать другие вещи которые будут выглядеть потрясающе, и нам для этого необходим хороший инструмент. Один из них это p5js.В голимом 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>
эскиз.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 код ?
функция setup это инициализация, выполняется она один раз, в ней мы создаем канвас, т.е. область где будем рисовать точку. window.innerWidth, window.innerHeight
это ширина и высота экрана, т.е. мы определяем канвас на весь экран и да, в HTML очень важный стиль для этого указан тоже
<body style="margin: 0px;">
Больше инициализировать нам ничего не надо,а просто надо нарисовать точку. Тут смотрите какой принцип.. функция draw выполняется например 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 можно, но выглядеть такой код будет совершенно безобразно, нечитаемо и трудно понимаемо !