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线性梯度。

我最终得到的是RGB色彩空间的漂亮表示！但是！本例中对z轴-blue通道的更改-意味着我必须调用一个JS函数，该函数迭代256个循环，并使用新的CSS线性梯度更新256个DOM元素的背景。

我之所以制作这个web-app，是因为我在当前基于web的颜色选择器中看到的限制，对于Z轴的每一次改变，256步循环将把不可接受的计算开销放入程序中。

有没有更好的方法来制作对偶向量梯度？也许我可以为HTML5画布元素创建一个应用程序特定库？我将在位图而不是DOM元素上操作，这可能会显著降低处理器每次调用的成本？

Answer 1

为此，您可以使用canvas元素。Here are some examples of colorpickers。

Answer 2

基本上，你想创建两个线性渐变，一个水平，一个垂直，从透明到任何你想要的rgba颜色。然后在画布上绘制一个渐变到另一个。不过有个问题，我发现画布不能生成非常干净的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 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];
}