color picker
 

хочу написать color picker на чистом js но не могу найти материала чтоб почитать хотя бы какой алгоритм у него , а то не могу понять как он работает.
так как хочу использовать для этого canvas возник вопрос а можно ли определить на канве какой цвет под курсором?

А зачем вам определять цвет под курсором? Вы же будете рисовать палитру на канвасе? По координатам будете определять цвет точки и выводить её. Значит по координатам вы сможете определить цвет, а значит вам достаточны координаты курсора, чтобы определить цвет под курсором.

снова столкнулся с проблемой при создание color picker , создав шкалу оттенков — Hue , возникла проблема как определить цвет rgb под курсором.
в таком порядке у меня цвета на шкале :

hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,255],[255,0,0]]

но вот в чем проблема как я понимаю что бы расчитать цвет rgb сначала нужно прибавлять значение ко второму параметру rgb , потом отнимать от первого , потом прибавлять к 3му ...
но вот как расчитать если перемещение сделано кликом ?
заранее спс=)

Написал colorpicker, практически без изображений используется только одно, для построения шкалы Hue используется canvas, так вот и последнее изображение хочу заменить на canvas, но не получаться вот изображение

Оно состоит из 3х частей:

left - top - белый цвет
потом по левой стороне идет переход от белого к серому и от серого к черному.
bottom - черный цвет
и все что справа - прозрачное. Вот похожая реализация только там картинка: www.colorpicker.com

Помогите, пожалуста

не изобретать велосипед, а почитать про канву и её методы стоит

cyber,
По приведённой ссылке выполнено без canvas - чисто по положению курсора ЫЫ

В большем Окне = скроллируемая гифка, в зависимости от скролла и курсора вычисляется цвет,
в малом длином(который справа) по высоте div - тож гифка с вычислением цвета по формуле, т.е чисто от местоположения курсора

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

Ну обычно на канве не рисуют - а вставляют пиксельно с готовой картинки

на так всеравно поидее картинку прийдеться загружать?
просто градиентом сделать не получиться?

Ну есть плюс - что считываете цвет прямо с картинки (* http://ldalab.ru/post/vstavka_izobrazheniya_canvas.html
Или по приведенной Вами ссылке - нужна формула - для большой картинки
от скролла и координат курсора
- для длиной-высокой - от высоты
- в принципе, для узкой-правой - формула вычисляется легко - по 10 -12 точкам апроксимации

- для левой-широкой точек думаю до 1000 , т.к картинка достаточно большая http://www.colorpicker.com/images/co...bgGradient.png (Хотя может есть и готовая формула

понял спс буду разбираться

http://www.eyecon.ro/bootstrap-colorpicker/

комментариев немного, но код небольшой и вполне понятный

да сам colorpicker у меня на 100% готов я просто думаю получиться у меня изображение на канву заменить или нет

вот демо версия того что получилось
http://learn.javascript.ru/play/D6FMAb

ваш ответ полностью расшифровать не смог=)
а ссылка очень полезная много инетиресного узнал=)

Ну оч даж! - ток клик по правому окну не дореализован

это так наброски
квадрат с права будет миниатюрой по клику на которую будет появляться над ним colorpicker, слева от него(квадрата с текущим цветом) будет форма отображающие цвета в шестнадцатиричной системе.
как то так=)
щас е*** мозг с дизайном=(

в этой демо шкала Hue нирисована канвой, так как пишу рисовалку на канве , библиотеку ExplorerCanvas буду подключать по любому (единственная библиотека которую я юзаю:) ) , в чем проблема :
библиотеку подключил а шкалу всеравно не рисует только рамку от нее (сообщение что канва не поддерживается не выдает)

если кому будет интересно, вот colorpicker на чистом javascript, без использования jquery и картинок

Очуметь 13 тысяч байт там где можно обойтись парой градиентов.

<style type="text/css">
        i#cp1,i#cp2,i#cp3 { position: absolute;display: block;width: 100px;height: 100px;
            background:linear-gradient(to left,rgba(255, 0, 0, 1),rgba(255, 255, 255, 1));}
        i#cp2{background:linear-gradient(to top, rgba(0, 0, 0, 1), rgba(255, 0, 0, 0));}
        i#cp3{left: 110px;width: 10px;background:linear-gradient(to top,#F00,#FF0,#0F0,#0FF,#00F,#F0F,#F00);}
    </style>
    <b id="color_picker">
        <i id="cp1"></i>
        <i id="cp2"></i>
        <i id="cp3"></i>
    </b>

MallSerg, а вот так это делается на js

_proto_._DrawPicker = function(canvas, bgColor) {
   
  var  gr,
       ctx = canvas.getContext('2d'),
       w = canvas.width,
       h = canvas.height;

 // console.log(bgColor);
    ctx.fillStyle = bgColor;  
    ctx.fillRect(0, 0, w, h); 

    gr = ctx.createLinearGradient(0, h, w, h);

    gr.addColorStop(0, '#FFFFFF');
    gr.addColorStop(1, 'rgba(204, 154, 129, 0)');

    ctx.fillStyle = gr;
    ctx.fillRect(0, 0, w, h);

    gr = ctx.createLinearGradient(0, w, 0, 0);

    gr.addColorStop(0, '#000000');
    gr.addColorStop(1, 'rgba(204, 154, 129, 0)');

    ctx.fillStyle = gr;
    ctx.fillRect(0, 0, w, h);

 };

4 раза переписывал этот проект, а потом забил, потом каждый раз казалось что код ужасный, начинал переписывать, забивал, возвращался к переписыванию :)