Отображение цветового пространства в HTML

Question

Итак, я пытаюсь отобразить цветовое пространство в HTML, и мои знания в значительной степени ограничены CSS HTML и Javascript.Я ищу способ построить 2-х мерный градиент с 2 переменными по 2 векторам.Мое исследование показало, что CSS и SVG технология имеет потенциал только для одного измерения размеров.Вернее, линейные грады могут иметь только один вектор.Поэтому, чтобы восполнить это ограничение, я использую JS для итерации по 256 изменениям, которые мне нужны, чтобы получить градиент на 2 цветовых каналах RGB.Так что представьте, если вам нужна ось X, относящаяся к примеру, например, Red и Grads от 0 до 255 и ось Y, которая также относительна - Green и Grads от 0 до 255, но с итерацией JS вместо линейного CSS-grad.

Я получаю прекрасное представление о цветовом пространстве RGB! НО!изменения в канале z-axis-blue в этом примере означают, что мне нужно вызвать функцию JS, которая выполняет итерации по 256 циклам, обновляя фон 256 элементов DOM с помощью новых линейных градаций CSS.

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

Есть идеи для лучшего способа сделать двойной векторный градиент?Возможно, я мог бы создать библиотеку для приложения для элемента HTML 5 canvas ???Где я буду работать с растровым изображением вместо элементов DOM, может быть, значительно снизить стоимость процессора за вызов?

Answer 1

По сути, вы хотите создать два линейных градиента, один горизонтальный, один вертикальный, переходя от прозрачного к любому желаемому цвету rgba. Затем нарисуйте один градиент над другим на холсте. Хотя есть некоторая хитрость, я обнаружил, что canvas не создает очень чистые градиенты RGBA, но вы можете использовать полупрозрачные цвета, нарисовать первый раз, второй дважды, затем первый снова, и кажется, что дать довольно хорошие результаты. Вы можете поиграть с ним, вот код для работы.

    var Draw = function(clr1, clr2){
        clr1 = clr1 || 'rgba(255, 0, 0, 0.5)';
        clr2 = clr2 || 'rgba(0, 0, 255, 0.5)';

        var bg1 = document.getElementById('canvas').getContext('2d'),            
            grad1 = bg1.createLinearGradient(0, 128, 256, 128),
            grad2 = bg1.createLinearGradient(128, 0, 128, 256);

        grad1.addColorStop(0, 'rgba(255, 0, 0, 0)');
        grad1.addColorStop(1, clr1);

        grad2.addColorStop(0, 'rgba(0, 0, 255, 0)');
        grad2.addColorStop(1, clr2);

        bg1.fillStyle = grad1;
        bg1.fillRect(0, 0, 256, 256);


        bg1.fillStyle = grad2;
        bg1.fillRect(0, 0, 256, 256);
        bg1.fillRect(0, 0, 256, 256);

        bg1.fillStyle = grad1;
        bg1.fillRect(0, 0, 256, 256);
    }

Answer 2

Для этого вы можете использовать элемент canvas. Здесь : некоторые примеры из colorpickers .

Answer 3

Вот простой пример, показывающий, как создать произвольный градиент на холсте с контролем на пиксель: http://jsfiddle.net/j85FQ/3/

colorField( myCanvas, 500, 500, pretty );

function colorField(canvas,width,height,colorLookup){
  var w = width-1, h = height-1;
  canvas.width  = width;
  canvas.height = height;  
  var ctx  = canvas.getContext('2d'),
      idata = ctx.getImageData(0,0,width,height),
      data  = idata.data;
  for (var x=0;x<width;++x){
    for (var y=0;y<height;++y){
      var rgba = colorLookup(x/w,y/h);
      var o = (width*y+x)*4;
      for (var i=0;i<4;++i) data[o+i] = rgba[i]*255;
    }
  }
  ctx.putImageData(idata,0,0);
}

function pretty(xPct,yPct){
  return [ xPct, yPct, xPct*(1-yPct), 1];
}

Answer 4

Спасибо, ребята, я смог разобраться с элементом canvas. Я использовал заполнение сегмента для значения канала z и горизонтальные и вертикальные линейные градиенты от 0 до 255 для каналов x и y. Установка context.globalCompositeOperation = "lighter" была ключом, который я пропустил. Это был простой аддитивный режим, который мне был нужен намного проще, чем пытаться найти подходящий метод альфа-композитинга. Ниже описана функция инициализации canvas, которую я написал.

    function init() {
     var c = document.getElementById('myCanvas');
     var ctx = c.getContext('2d');
     ctx.globalCompositeOperation = "lighter";
     var grd = ctx.createLinearGradient(0, 0, 512, 0);
     grd.addColorStop(0, "#000000");
     grd.addColorStop(1, "#FF0000");
     var grd2 = ctx.createLinearGradient(0, 0, 0, 512);
     grd2.addColorStop(0, "#000000");
     grd2.addColorStop(1, "#00FF00");
     ctx.fillStyle = "#0000FF";
     ctx.fillRect(0, 0, 512, 512);
     ctx.fillStyle = grd;
     ctx.fillRect(0, 0, 512, 512);
     ctx.fillStyle = grd2
     ctx.fillRect(0, 0, 512, 512)
  }