Проблема изменения цвета в HTML Canvas с использованием JavaScript

Оффтоп javascript
1

Привет всем! Я новичок в HTML и JavaScript, и у меня возникла проблема с проектом рисования на canvas. Я пытаюсь добавить функцию выбора цвета через выпадающее меню, но что-то идет не так.

Вот часть моего кода:

<select id="colorPicker">
  <option value="красный">Красный</option>
  <option value="синий">Синий</option>
  <option value="зеленый">Зеленый</option>
</select>

function рисовать(event) {
  if (инструментАктивен) {
    let выбранныйЦвет = document.getElementById('colorPicker').value;
    контекст.strokeStyle = выбранныйЦвет;
    контекст.lineTo(event.clientX, event.clientY);
    контекст.stroke();
  }
}

Но это не работает. Цвет линии не меняется при выборе другого цвета из меню. Может кто-нибудь подсказать, где я ошибся? Заранее спасибо за помощь!

2

А ты пробовал использовать addEventListener для отслеживания изменений в выпадающем списке? Типа так:

document.getElementById(‘colorPicker’).addEventListener(‘change’, function() {
let выбранныйЦвет = this.value;
контекст.strokeStyle = выбранныйЦвет;
});

Это должно обновлять цвет сразу при выборе. И да, как уже сказали, с английскими названиями цветов или HEX-кодами точно будет работать. Удачи с проектом!

3

Знаешь, у меня была похожая проблема когда я только начинал работать с канвасом. Дело в том, что значения цветов в выпадающем меню не соответствуют тому, что ожидает strokeStyle. Попробуй заменить значения на английские названия цветов или hex-коды. Например:

<option value="red">Красный</option>
<option value="#0000FF">Синий</option>

И еще один момент - убедись, что ты устанавливаешь strokeStyle до начала нового пути (beginPath). иначе изменения могут не применится. удачи в твоем проекте!

4

Проблема скорее всего в том как ты задаешь цвет. Вместо названий на русском, используй английские: ‘red’, ‘blue’, ‘green’. Или лучше HEX-коды, например ‘#FF0000’ для красного.

Еще совет - сбрасывай путь через context.beginPath() перед каждым рисованием. И не забудь закрывать путь через context.closePath().

Кста, для плавности можно юзать context.lineCap = ‘round’. Рисование будет намного приятнее.