Advertisement
  1. Web Design
  2. JavaScript

Как управлять цветами в JavaScript через Chroma.js

Scroll to top
Read Time: 3 min

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

В сегодняшнем видеоуроке, я покажу вам как управлять цветами в JavaScript. Всё верно, JavaScript. Не CSS. Поехали и посмотрим о чём я говорю!

Смотрите видеоурок

Мы все привыкли к мысли о том, что CSS обрабатывает стили, в то время как JavaScript используется для поведения и эти две вещи должны быть отдельны. Но когда невозможно определить стили непосредственно через CSS, например, когда они установлены с помощью пользовательского ввода, JavaScript сделает всю тяжёлую работу за вас.

Chroma.js это небольшая библиотека, которая может помочь в управлении цветами, поэтому давайте посмотрим, как начать это использовать.

Цепляем

Chroma можно выудить из его репа на Github или вставить с CDNJS, используя эту ссылку:

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.4/chroma.min.js"></script>

Демонстрация

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

Если вы захотите следить, как я воссоздаю то, что в демо, возьмите файл start.html (который содержит все, кроме JavaScript, который мы напишем), и откройте его в редакторе кода.

Heres what were buildingHeres what were buildingHeres what were building
Вот, что мы делаем

Начните с добавления следующего фрагмента кода между тегами <script> в нижней части html-документа: в нижней части html-документа:

1
       document.addEventListener('DOMContentLoaded', function() {
2
            
3
            var btnGenerateColorScheme = document.querySelector('#generate-color-scheme'),
4
                btnGenerateColorScale = document.querySelector('#generate-color-scale'),
5
                colorScheme = document.querySelector('.color-scheme'),
6
                colorScale = document.querySelector('.color-scale'),
7
                steps = 5, // is preferably an odd number

8
                chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList;
9
            
10
            btnGenerateColorScheme.addEventListener('click', function() {
11
               
12
            });
13
14
            btnGenerateColorScale.addEventListener('click', function() {
15
             
16
            });
17
18
        });      

Это большой кусок, но гораздо менее устрашающий, чем вы можете сперва подумать! Он начинается с прослушивателя событий DOMContentLoaded, который ждёт, пока документ будет загружен, перед выполнением любой из следующих функций.

Затем я определяю кучу переменных, которые мы будем использовать, начиная с двух кнопок, затем контейнеров colorScheme и colorScale, затем steps (число, которое мы будем использовать в ближайшее время).

Наконец, есть два прослушивателя событий клика с (пока что) пустыми функциями. Мы начнем с первого из них: btnGenerateColorScheme, который (как неудивительно) является кнопкой, которая будет генерировать цветовую схему.

btnGenerateColorScheme

В пустой функции, между фигурными скобками, мы начнём с задания пустого массива colorList:

1
// Reinitialize the color list.

2
                colorList = [];

Когда пользователь нажимает на кнопку, первое, что нам нужно сделать — получить цвет из поля ввода #user-color.

1
                // Get the color value.

2
                userColor = document.querySelector('#user-color').value;

Затем нам нужно сбросить значения в списке схемы цветов. Это делается обрезкой innerHTML элемента .color-scheme, чем в нашем случае является <ol>. Здесь вы видите, как мы назначаем innerHTML равным на пустую строку.

1
                // Reset the content of the color scheme list.

2
                colorScheme.innerHTML = '';

Вызов Chroma

Переходим к весёлой части! Мы подключаем билиотеку chroma.js, вызывая chroma() и передаём цвет:

1
                // Initialize Chroma.

2
                chromaColor = chroma(userColor);

Значение цвета userColor мы достали из поля ввода ранее.

Мы собираемся создать монохроматическую цветовую схему, основанную на выбранном цвете. Мы сделаем это, создав массив, благодаря циклу for:

1
                // Create a monchromatic color scheme.

2
                for (var i = 0; i < steps; i++) {
3
                    colorList[i] = chromaColor.darken(i);
4
                }

Этот цикл повторяет число шагов, определенных в переменной steps (мы установили там 5, помните?) Каждый раз, когда мы повторяем, в коллекцию добавляется слегка более темный оттенок.

Наконец, нам нужно сгенерировать некоторые элементы, используя пять значений в нашем массиве. Каждый раз, когда мы создаем элемент <li>, задаём ему backgroundColor в соответствии с нашим colorList, а затем дополняем им colorScheme.

1
                // Generate some elements.

2
                for (var j = 0; j < colorList.length; j++) {
3
                    var newItem = document.createElement('li');
4
5
                    newItem.style.backgroundColor = colorList[j];
6
7
                    colorScheme.appendChild(newItem);
8
                }

Готово!

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

our color schemeour color schemeour color scheme
Наша цветовая схема

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

Видеоурок также включает инструкции по созданию генератора цветовой гаммы, поэтому подключайтесь и сообщите мне, как у вас получается!

Дополнительные ресурсы

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.