Когда-то давно на самых первых шагах изучения 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 в тырнете сейчас скорее всего мало

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

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

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

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

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

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

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