Когда-то давно на самых первых шагах изучения JS попытался спародировать MS Paint

@Zloyalex100 · Регистрация: 05.08.2021

Студворк — интернет-сервис помощи студентам

Понимаю что конечно получился не фонтан, но Canvas в то время, кажется, еще не придумали...
А вообще интересно, реальный аналог Пэйнта на чистом JS написать можно?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>HTML5</title>  
  <style>
  #panel {
            position: absolute;
            z-index: 1;
            /*border-style: solid;*/
            border-color: indigo;
            background-color: beige;
            width: 450px;
        }
        #r {
            background-color: red;
            margin-left: 50px;
            width: 25px;
            color: white;
        }
        #b {background-color: blue;
            width: 25px;
            color: white;
        }
        #g {background-color: green;
            width: 25px;
            color: white;
        }
        #y {background-color: yellow;
            width: 25px;
            color: white;
        }
        #er {background-color: white;
        }
        #bl {background-color: black;
            width: 25px;
            color: white;
        }
        body {background-color: white}
        * {user-select: none;}
  </style>
 </head>
 <body>
  <div id="panel">
<input type="button" id="r" name="colors" value="x">
<input type="button" id="b" name="colors" value="">
<input type="button" id="g" name="colors" value="">
<input type="button" id="y" name="colors" value="">
<input type="button" id="bl" name="colors" value="">
<input type="button" id="er" value="eraser">
<input type="button" id="p" value="+">
<input type="button" id="m" value="-">
<span>Size of brush: <span  id="sp"></span></span>
</div>
<script>
  colorOfBrush = 'red';
    startSize = 30;
    var colorsArray = document.getElementsByName('colors');
    for (var i = 0; i < colorsArray.length; i++) {
    colorsArray[i].onclick = function () {
        colorOfBrush = window.getComputedStyle(this).backgroundColor;
        for (var i = 0; i < colorsArray.length; i++) {
        if (colorsArray[i] != this) {colorsArray[i].value = ''}
        }
        this.value = 'x';
    }
    }
    er.onclick = function () {
       colorOfBrush = 'white'
    }
    p.onclick = function () {
        startSize += 3;
        sp.innerHTML = startSize + 'px';
    }
    m.onclick = function () {
        if (startSize <= 0) {startSize = 1}
        startSize -= 3;
        sp.innerHTML = startSize + 'px';
    }
    var pressMouse = false;
    window.onmousedown = function () {
        pressMouse = true;
        console.log(pressMouse);
    }
    window.onmouseup = function () {
        pressMouse = false;
        console.log(pressMouse);
    }
    window.onmousemove = function (e) {
        if (!pressMouse) {return}
        div = document.createElement('div');
        div.style.width = startSize + 'px';
        div.style.height = startSize + 'px';
        div.style.top = e.clientY + 'px';
        div.style.left = e.clientX + 'px';
        div.style.zIndex = 0;
        div.style.backgroundColor = colorOfBrush;
        div.style.borderRadius = '50%';
        div.style.position = 'absolute';
        document.body.appendChild(div);
    }
</script>
 </body>
</html>

@Usaga · 02.09.2025, 14:53

Zloyalex100, что за «чистый JS» и чем он от нечистого отличается?)

@Zloyalex100 · 02.09.2025, 15:10 **[ТС]**

Сообщение от Usaga

что за «чистый JS” и чем он от нечистого отличается?)

Ну, безо всяких там "канвасов"... Вроде это более поздние приблуды по дате появления. Хотя точно не уверен

Добавлено через 13 минут
То есть имел в виду не "чистый", а "первобытный". 90-х годов. Который у самых "корней земли"

@sad67man · 02.09.2025, 17:25

Сообщение от Zloyalex100

А вообще интересно, реальный аналог Пэйнта на чистом JS написать можно?

Ну пейнт это по сути это сетка пикселей, каждый из которых закрашен в определенный цвет..

Если делать что каждый пиксель - это отдельный dom-элемент, то это будет весьма ресурсозатратно. Канвас для таких целей лучше подходит.

У вас на mousemove создаются div-ы но никогда не удаляются.. Я бы попробовал сделать, чтоб "холст" был заранее заполнен, к примеру создать таблицу с ячейками в 1 пиксель. И на mousemove закрашивать тот элемент над которым находится мышь.

Добавлено через 1 час 9 минут
Попробовал - работает ужасно) Надо придумать что-то другое)

@Usaga · 03.09.2025, 05:38

Сообщение от Zloyalex100

То есть имел в виду не "чистый", а "первобытный". 90-х годов. Который у самых "корней земли"

А в чём прикол нацеливаться на первобытный JS, когда есть современный?..

@Zloyalex100 · 03.09.2025, 16:42 **[ТС]**

Кстати, размер кисти при уменьшении уходил в отрицательные числа... Напутал с порядком строк

JavaScript
1
2
3
4
5
m.onclick = function () {
        startSize -= 3;
        if (startSize <= 0) {startSize = 1}        
        sp.innerHTML = startSize + 'px';
    }

@Zloyalex100 · 14.09.2025, 16:16 **[ТС]**

Сообщение от sad67man

Попробовал - работает ужасно) Надо придумать что-то другое)

В смысле, что именно работает ужасно? Мой вариант с добавлениями div-ов (об этом и так знаю) или таблица из пикселей?

@sad67man · 14.09.2025, 17:17

Сообщение от Zloyalex100

В смысле, что именно работает ужасно? Мой вариант с добавлениями div-ов (об этом и так знаю) или таблица из пикселей?

Таблицей из пикселей. При движении пропускаются фреймы, с canvas будет таже проблема. Придется применять какие-то алгоритмы для вычисления линий по точкам.

@Royal_X · 15.09.2025, 12:44

создание множества маленьких кружков вдоль траектории движения мыши - это худший подход, который можно было реализовать. Это выглядит ужасно и это решение не оптимизировано.
Я не изучал, как это реализовано в MS Paint, но скорее всего, там просто с определенной частотой берутся координаты точек, по который проходит курсор. Потом просто используется интерполяция, чтобы заполнить разрывы. Это предотвращает разрывы при быстром движении мыши. То есть все-таки там рисуется не точками, а линиями. Возможно, используется алгоритм Брезенхэма или какая-то его модификация. В старых версия Paint сглаживания вообще не было, поэтому вероятно, что именно так и рисовалось.
В случае со сглаживанием интерполяция может быть по кубическим сплайнам или что-то в этом роде.

@Royal_X · 15.09.2025, 13:29

Вот, я делал рисование на стенах и на полу в своей трехмерной игре.

Когда-то давно на самых первых шагах изучения JS попытался спародировать MS Paint

Рисование у меня плавное, просто джифка воспроизводится со скоростью 5 кадров в сек из-за ограничений размера на форуме.

@Zloyalex100 · 25.09.2025, 14:39 **[ТС]**

Кстати, что касается рисования в самом Пэйнте... Пробовал это делать в той версии которая была в XP в нулевые годы... Конечно способности ее не велики, явно не Фотошоп, но хотя бы кораблики нарисовать позволяет

@Zloyalex100 · 25.09.2025, 18:37 **[ТС]**

Разгребал тут свои старые папки, даже вот такой "Тинто Брасс" попался... Даже не знаю что сказать...

@Zloyalex100 · 16.10.2025, 20:53 **[ТС]**

Уже даже подзабыл каким именно образом в Пейнте начала нулевых годов всё это рисовал... Помню что там было не всё так просто....
А как вспомнить? Инструкций по Windows XP в тырнете сейчас скорее всего мало

Новые блоги и статьи Все статьи Все блоги /
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .

@Usaga 14303 / 9388 / 1354 Регистрация: 21.01.2016 Сообщений: 35,398
	02.09.2025, 14:53
	Zloyalex100, что за «чистый JS» и чем он от нечистого отличается?) 0

@Royal_X 6224 / 2925 / 1046 Регистрация: 01.06.2021 Сообщений: 10,829
	15.09.2025, 12:44
	создание множества маленьких кружков вдоль траектории движения мыши - это худший подход, который можно было реализовать. Это выглядит ужасно и это решение не оптимизировано. Я не изучал, как это реализовано в MS Paint, но скорее всего, там просто с определенной частотой берутся координаты точек, по который проходит курсор. Потом просто используется интерполяция, чтобы заполнить разрывы. Это предотвращает разрывы при быстром движении мыши. То есть все-таки там рисуется не точками, а линиями. Возможно, используется алгоритм Брезенхэма или какая-то его модификация. В старых версия Paint сглаживания вообще не было, поэтому вероятно, что именно так и рисовалось. В случае со сглаживанием интерполяция может быть по кубическим сплайнам или что-то в этом роде. 0

@Royal_X 6224 / 2925 / 1046 Регистрация: 01.06.2021 Сообщений: 10,829
	15.09.2025, 13:29
	Вот, я делал рисование на стенах и на полу в своей трехмерной игре. Рисование у меня плавное, просто джифка воспроизводится со скоростью 5 кадров в сек из-за ограничений размера на форуме. 0

@Zloyalex100 121 / 116 / 18 Регистрация: 05.08.2021 Сообщений: 506
	25.09.2025, 14:39 [ТС]
	Кстати, что касается рисования в самом Пэйнте... Пробовал это делать в той версии которая была в XP в нулевые годы... Конечно способности ее не велики, явно не Фотошоп, но хотя бы кораблики нарисовать позволяет Миниатюры 0

@Zloyalex100 121 / 116 / 18 Регистрация: 05.08.2021 Сообщений: 506
	25.09.2025, 18:37 [ТС]
	Разгребал тут свои старые папки, даже вот такой "Тинто Брасс" попался... Даже не знаю что сказать... Миниатюры 0

@Zloyalex100 121 / 116 / 18 Регистрация: 05.08.2021 Сообщений: 506
	16.10.2025, 20:53 [ТС]
	Уже даже подзабыл каким именно образом в Пейнте начала нулевых годов всё это рисовал... Помню что там было не всё так просто.... А как вспомнить? Инструкций по Windows XP в тырнете сейчас скорее всего мало 0