Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/6: Рейтинг темы: голосов - 6, средняя оценка - 4.50
Модератор
1478 / 1073 / 556
Регистрация: 16.10.2013
Сообщений: 3,232
Записей в блоге: 9
1

Закрасить canvas по клику ЛКМ

18.03.2020, 15:31. Показов 1085. Ответов 2

Здравствуйте всем

С javascript "на ты", посему не могу понять как сделать след. вещь. Есть такой код:

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
<html>
 
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script>
        var canvas = document.getElementById("canvas");     // канвас
        var ctx = canvas.getContext('2d');                  // контекст для рисования
        var color = document.getElementById('color').value; // значение цвета
        
        canvas.onmouseclick = function (e) {
            // закрасить канвас в цвет color 
        };
    </script>
 
</head>
 
<body>
    <canvas id="canvas" width="400" height="400" style="border: solid;"></canvas>
    <input style="width:110px" type="color" id="color">
</body>
 
</html>
Не знаю как можно при клике левой кнопкой мыши по канвасу его залить выбранным цветом. Подскажите, пожалуйста, кто знает.
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.03.2020, 15:31
Ответы с готовыми решениями:

[Win API] Загрузить и вывести BMP - изображение по клику ЛКМ
Здравствуйте! Подскажите каким образом можно вывести изображение по клику Левой кнопки мыши ...

Закрасить Canvas
проблема вот в чем...на канве вывожу план аудитории,он выводится,затем меняю на другую аудиторию и...

Закрасить ячейку в Stringgrid по клику
Такая проблема - нужно, чтобы при клике на ячейку в Stringgrid она окрашивалась в определенный цвет...

Закрасить четырехугольник в Canvas
Можно ли залить четырехугольник цветом в canvas?

2
the hardway first
Эксперт JS
2070 / 1544 / 781
Регистрация: 05.06.2015
Сообщений: 3,210
18.03.2020, 16:03 2
Лучший ответ Сообщение было отмечено long399 как решение

Решение

Цитата Сообщение от long399 Посмотреть сообщение
С javascript "на ты"
Хм... "на ты" - это когда хорошо разбираешься в чём-то. Диссонанс

У вас скрипт выполняется в <head> - DOM ещё даже не появился. Нет обработчика onmouseclick, есть onclick. Значение цвета вы берёте один раз, больше значение переменной color не изменится.
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
<html>
 
  <head>
  </head>
 
  <body>
    <canvas id="canvas" width="400" height="400" style="border: solid;"></canvas>
    <input style="width:110px" type="color" id="color">
 
    <script>
      var canvas = document.getElementById("canvas"); // канвас
      var ctx = canvas.getContext('2d'); // контекст для рисования
 
      canvas.onclick = function() {
        // закрасить канвас в цвет color 
        var color = document.getElementById('color').value; // значение цвета
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, 400, 400);
      };
 
    </script>
  </body>
 
</html>
1
Модератор
1478 / 1073 / 556
Регистрация: 16.10.2013
Сообщений: 3,232
Записей в блоге: 9
18.03.2020, 16:15  [ТС] 3
Цитата Сообщение от j2FunOnly Посмотреть сообщение
Диссонанс
Точняк, перепутал понятие

И благодарю за оперативную помощь! Все понятно объяснили.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.03.2020, 16:15

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Выбрать числа из STRNGD и закрасить их по клику
Необходимо создать аналог заполнения комбинации лото &quot;5 из 36&quot;. Есть STRNGD заполненная числами...

Как закрасить область рисунка по клику мышкой?
Мне нужно нарисовать в C# дом и я его нарисовал с помощью геометрических фигур. Теперь надо, что бы...

Как закрасить свободную часть в Canvas?
Доброе время суток, у меня появилась такая вот проблема : хочу закрасить в канвасе свободную...

Закрасить фон canvas в соответствии с выбором пользователя
есть combobox. в нем пункты-цвета. надо выбирать цвет и закрашивать конву этим цветом. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.