Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 17.11.2020
Сообщений: 18

Переключение между кистями

29.09.2021, 21:40. Показов 722. Ответов 0
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Мне нужно сделать переключение между формой кисти (кругом и квадратом).
Как мне это сделать?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
 <title>Fingerpainting</title>
</head>
<body style="margin: 0px;">
 <canvas id="canvas"></canvas>
 <div>
    <input type="color" id="bgcolor"/><br/>
    <input type="hidden" id="colorContainer"/>
  </div>
  <div class="radcirc" ><input id="ramer" type="range" oninput="razmer()" value="10" min = "10" max="100"></div>
  <div id="selection">
      <form name="myForm">
    <select style="position: relative;left: 5px;top: 5px;" name="forme" size="1">
        <option value="circle" selected="selected">circle</option>
        <option value="cube">cube</option>
    </select>
</form></div>
 <script src="script.js"></script>
</body>
</html>
JavaScript
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
var canvas = document.getElementById('canvas');
var c = canvas.getContext('2d');
var k = canvas.getContext('2d');
 
 
canvas.width = 1366;
canvas.height = 620;
 
c.fillStyle="#000000";
c.fillRect(0,0,canvas.width, canvas.height);
 
var colorPicker = document.getElementById("bgcolor");
var colorVal;
var buttons = document.querySelectorAll(".colors");
var done = document.getElementById("doIt");
 
function changebodycolor(){
  colorVal = colorPicker.value;
  document.getElementById("colorContainer").value = colorVal;}
 
  colorPicker.addEventListener("change",
changebodycolor,false);
 
var formertSelect = myForm.forme;
 // Переключение кисти
function changeOption(){
     
    var selection = document.getElementById("selection");
    var selectedOption = formertSelect.options[formertSelect.selectedIndex];
    
}
 
formertSelect.addEventListener("change", changeOption);
 
var paintColors = '#ffffff';
var circleradius = 10;
 
function razmer() {
  var rng=document.getElementById('ramer'); //rng - это ползунок
  circleradius = rng.value;
}
 
function drawsq(x,y){
  k.beginPath();
  k.lineTo(x+circleradius,y+circleradius);
  k.lineTo(x+circleradius,y+circleradius);
  k.lineTo(x+circleradius,y+circleradius);
  k.fill();
  k.stroke();
}
// переделать квадрат
 
function drawCircle(x, y){
   c.beginPath();
   c.arc(x, y, circleradius, 0, 2 * Math.PI);
   c.fill();
 }
 
var mouseDown = false;
 
changeOption()
 
function addMouseListeners(){
 canvas.addEventListener('mousemove', function(e){
   if(mouseDown){
    console.log(formertSelect.selectedIndex);
    // переключение кисти ???????
    //if(selectedOption = 0){    // <---------------------------
     c.fillStyle = colorVal; //в этой строке устанавливается цвет, которым будут отрисовываться круги
     drawCircle(e.clientX, e.clientY);//}
      //if(selectedOption = 1){
      k.fillStyle = colorVal;
      drawsq(e.clientX, e.clientY);
   }//}
   
 });
  canvas.addEventListener('mousedown', function(e){
    mouseDown = true;
 });
  canvas.addEventListener('mouseup', function(e){
   mouseDown = false;
 });
  canvas.addEventListener('dblclick', function(e){
   c.fillStyle = 'black';
   c.fillRect(0,0,canvas.width, canvas.height);
 });
}
addMouseListeners();
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
29.09.2021, 21:40
Ответы с готовыми решениями:

Переключение между картинками
Напиши скрипт, который при клике будет по очереди показывать эти картинки так, чтобы получился эффект мультика. 1 клик = 1 кадр Ссылки...

Переключение между PopUp
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; &lt;title&gt;Test&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;style...

Переключение между скриптами
&lt;select id='gamemode' class='form-control' onchange='setGameMode($(this).val())' required&gt; &lt;option selected...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
29.09.2021, 21:40
Помогаю со студенческими работами здесь

Переключение между функциями
в опщем есть функция: function display(){ showElement('teoriya'); hideElement('test'); hideElement('button'); var milisec=9 var...

Переключение между <div>-ами
В первый раз работаю со скриптами и прошу помощи. Нужно сделать некую навигацию между дивами. Например, в форме есть 3 дива, два из которых...

Переключение между div (ами)
День добрый Господа! Есть вопрос у меня кнопки списком : &lt;li&gt;&lt;a href=&quot;#&quot;...

Переключение между модальными окнами
Доброго времени суток всем! Подскажите, вот заюзал эту &quot;штуку&quot;. Нашел на просторах инета, для себя довльно простую реализацию ...

Переключение между блоками div через js
помогите разобраться, есть следующий код(сам вижу что говнокод): &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta...


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

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru