Як створити колірну палітру (color-picker) за допомогою html5 canvas

Створення HTML5 «холстовий» (від англ. "Сanvas") додатків, є новим трендом, з їх допомогою ми навіть можемо створювати гри, так як вони підтримуються у всіх провідних браузерах (від настільних до мобільних) і це робить їх більш ефективним рішенням, ніж використання уміраещего Flash.

У цьому прикладі, код HTML буде дуже мінімальним - все, що нам потрібно для роботи кольорової палітри - це кинувся елемент і місце для того щоб показати обраний колір в RGB і HEX ​​форматах. Ось, що нам потрібно:

Так як ми будемо використовувати фонове зображення з палітрою кольорів, ми зробили ширину і висоту кинувся соответствующею розмірами зображення - 600 × 440 пікселів. Ми також повинні додати jQuery на нашу сторінку, так як ми будемо використовувати jQuery код.

Перше, що нам потрібно зробити для того, щоб запрацювала палітра кольорів, це отримати кинувся і його контекст за допомогою рядка цього коду:

Тепер, коли ми отримали кинувся елемент і його контент, ми можемо встановити зображення в якості фону кинувся. Для цього нам потрібно створити зображення і зробити його джерелом URL картинки. Після того як зображення буде завантажено, вам потрібно перетягнути його в кинувся:

У цій частині ми повинні визначити, що буде відбуватися, коли ви натискаєте десь на канвасе, якщо подумати, то в першу чергу необхідно отримати позицію курсора користувача на канвасе, щоб побачити, де вони кликали. Наприклад, так:

За допомогою цих двох рядків коду, ми зможемо побачити, де кликав користувач. Що ми робимо, це отримуємо всі координати, де користувач кликав і потім з цього віднімаємо зміщення кинувся. Така дія покаже нам, де користувач кликав у порівнянні з положенням на канвасе.

Нашим наступним кроком буде отримання RGB значень, де клікає користувач. Для цього нам потрібно використовувати функцію getImageData і прикріпити Х і У положення кліка:

Тепер у нас є значення, які зберігаються в R, G і B змінних, але нам потрібно відобразити цю інформацію для користувачеві так, щоб вони могли легко її прочитати. Тому нам потрібно створити змінну RGB, яка буде тримати ці три значення, розділених комами, а потім представити їх, як значення одного з наших полів введення:

Тепер, коли ми отримали цю функцію все, що потрібно зробити для того, щоб представити HEX значення, це виконати функцію з нашим RBG значенням, а потім встановити значення введення на HEX кольору з # до і з функцією вже на місці. Це досить просто:

Повністю готовий код

УВАГА! Ви використовуєте застарілий браузер Internet Explorer

Даний сайт побудований на передових, сучасних технологіях і не підтримує Internet Explorer 6-ої і 7-ої версії.