Рисовалка JavaScript

@wweelltt · Регистрация: 21.04.2022

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

Наткнулся на данную обучалку "как сделать Рисовалку в JavaScript". Но запутался и у меня ничего не вышло, т. к. занимаюсь этим недавно

. Кто знает, как должен выглядеть готовый код? Помогите пожалуйста и заранее спасибо

Вот ссылка на ту обучалку http://gohtml.ru/js/152-javasc... iem-canvas

@NTHing · 22.04.2022, 08:30

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

как должен выглядеть готовый код?

Так на странице обучалки есть этот "готовый код"...

@j2FunOnly · 22.04.2022, 10:30

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

Кто знает, как должен выглядеть готовый код?

Берёте любой HTML5 шаблон, например тут и сохраняете в файл с расширением .htm и вставляете готовый код. Там ошибка в первой секции "Создаем объекты:" не JS, а HTML - вставляем в тег <body>. CSS вставить в тег <head>, предварительно обернув в тег <style>. JS вставить в тег <script> перед закрывающим тегом </body>.

Не по теме:

Да и не обучалка это никакая...

PHP/HTML
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 
<style>
.button {
  width: 15px;
  height: 15px;
  display: inline-block;
  padding: 1px;
  cursor: pointer;
  border: solid 1px #fff;
}
 
.button:hover {
  border: solid 1px #f00;
}
 
.button:active {
  border: solid 1px #ff0;
}
 
#palette, #canvas {
  display: inline-block;
  border: solid 1px #aaa;
  cursor: default;
  vertical-align: top;
}
 
#palette {
  width: 95px;
}
 
#clear {
  background: #eee;
  color: #777;
  padding: 10px;
  width: 200px;
  text-align: center;
  margin: 15px auto;
  cursor: pointer;
}
 
.container {
   white-space: normal;
   width: 710px;
}
</style>
 
</head>
<body>
 
<div class="container">
  <canvas id='canvas' width="600" height="600">Ваш браузер устарел!</canvas>
  <div id="palette"></div>
  <div id="clear">Очистить изображение</div>
</div>
 
<script>
// Выполняем по завершении загрузки страницы
window.addEventListener("load", function onWindowLoad() {
    // Инициализируем переменные
    // Генерируем палитру в элемент #palette
    generatePalette(document.getElementById("palette"));
 
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
 
    // переменные для рисования
    context.lineCap = "round";
    context.lineWidth = 8;
 
    // вешаем обработчики на кнопки
    // очистка изображения
    document.getElementById("clear").onclick = function clear() {
      context.clearRect(0, 0, canvas.width, canvas.height);
    };
 
    // На любое движение мыши по canvas будет выполнятся эта функция
    canvas.onmousemove = function drawIfPressed (e) {
      // в "e"  попадает экземпляр MouseEvent
      var x = e.offsetX;
      var y = e.offsetY;
      var dx = e.movementX;
      var dy = e.movementY;
 
      // Проверяем зажата ли какая-нибудь кнопка мыши
      // Если да, то рисуем
      if (e.buttons > 0) {
        context.beginPath();
        context.moveTo(x, y);
        context.lineTo(x - dx, y - dy);
        context.stroke();
        context.closePath();
      }
    };
 
    function generatePalette(palette) {
      // генерируем палитру
      // в итоге 5^3 цветов = 125
      for (var r = 0, max = 4; r <= max; r++) {
        for (var g = 0; g <= max; g++) {
          for (var b = 0; b <= max; b++) {
            var paletteBlock = document.createElement('div');
            paletteBlock.className = 'button';
            paletteBlock.addEventListener('click', function changeColor(e) {
              context.strokeStyle = e.target.style.backgroundColor;
            });
 
            paletteBlock.style.backgroundColor = (
              'rgb(' + Math.round(r * 255 / max) + ", "
              + Math.round(g * 255 / max) + ", "
              + Math.round(b * 255 / max) + ")"
            );
 
            palette.appendChild(paletteBlock);
          }
        }
      }
    }
});
</script>
 
</body>
</html>

krvsa · 22.04.2022, 12:35

Не по теме:

Ребята, возможно это просто спамер. Оставил ссылку на ресурс и все.

@wweelltt · 22.04.2022, 15:29 **[ТС]**

Спасибо большое за помощь)
И я не спамер...

Новые блоги и статьи Все статьи Все блоги /
Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.

@wweelltt 1 / 1 / 0 Регистрация: 21.04.2022 Сообщений: 12

	Рисовалка JavaScript 21.04.2022, 23:37. Показов 1073. Ответов 4 Метки canvas, canvas html5, canvasjs, html, javascipt, js (Все метки) Наткнулся на данную обучалку "как сделать Рисовалку в JavaScript". Но запутался и у меня ничего не вышло, т. к. занимаюсь этим недавно. Кто знает, как должен выглядеть готовый код? Помогите пожалуйста и заранее спасибо Вот ссылка на ту обучалку http://gohtml.ru/js/152-javasc... iem-canvas 0

krvsa
	22.04.2022, 12:35
	Не по теме: Ребята, возможно это просто спамер. Оставил ссылку на ресурс и все. 0

@wweelltt 1 / 1 / 0 Регистрация: 21.04.2022 Сообщений: 12
	22.04.2022, 15:29 [ТС]
	Спасибо большое за помощь) И я не спамер... 1

Опции темы

Рисовалка JavaScript

Решение