Изменение яркости цвета

Введение

В этом лабе мы будем изучать, как изменить яркость строки цвета hsl() с использованием JavaScript. С помощью манипуляций со строками, методов массивов и математических функций мы узнаем, как изменить значение яркости, при этом обеспечивая, чтобы оно оставалось в допустимом диапазоне от 0 до 100. Это умение пригодится при разработке веб-приложений, требующих динамических манипуляций с цветами на основе взаимодействия с пользователем.

Skills Graph

Как изменить яркость цвета HSL

Для изменения значения яркости строки цвета hsl() следуйте этим шагам:

1. Откройте Терминал/SSH и введите node, чтобы начать практиковаться в написании кода.

2. Используйте String.prototype.match(), чтобы получить массив из трех строк с числовыми значениями из строки hsl().

3. Используйте Array.prototype.map() в сочетании с Number, чтобы преобразовать строки в массив числовых значений.

4. Убедитесь, что значение яркости находится в допустимом диапазоне (между 0 и 100), используя Math.max() и Math.min().

5. Используйте шаблонную литерал, чтобы создать новую строку hsl() с обновленным значением яркости.

Вот пример кода, который реализует эти шаги:

const changeLightness = (delta, hslStr) => {
  const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);

  const newLightness = Math.max(
    0,
    Math.min(100, lightness + parseFloat(delta))
  );

  return `hsl(${hue}, ${saturation}%, ${newLightness}%)`;
};

Затем вы можете вызвать функцию changeLightness() с значением дельты и строкой hsl(), чтобы получить новую строку hsl() с обновленным значением яркости. Например:

changeLightness(10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 60%)'
changeLightness(-10, "hsl(330, 50%, 50%)"); // 'hsl(330, 50%, 40%)'

Резюме

Поздравляем! Вы завершили лабу по изменению яркости цвета. Вы можете практиковаться в других лабах в LabEx, чтобы улучшить свои навыки.