Question

所以我试图在HTML中映射颜色空间，我的知识几乎限于CSS HTML和Javascript。我正在寻找一种构建二维梯度的方法，其中2个变量沿着2个向量。我的研究表明，CSS和SVG技术只具有单维格式的能力。或者更确切地说，线性Grads只能有一个向量。因此，为了弥补这个限制，我使用JS迭代我需要的256个更改，以便我可以在2个RGB颜色通道上获得渐变。因此，如果你的x轴是相对于例如目的的图片 - 红色和Grads从0到255和y轴同样是相对的 - Green和Grads从0到255但是使用JS迭代而不是CSS线性-grad。

我最终得到的是RGB色彩空间的美丽表现！但是！在这个例子中更改为z轴 - 蓝色通道意味着我必须调用一个JS函数，该函数遍历256个循环，用新的CSS线性渐变更新256个DOM元素的背景。

我正在制作这个网络应用程序，因为我在当前基于网络的颜色选择器中看到的限制，每次更改Z轴的256步循环将在程序中产生不可接受的计算开销量。

任何想法都是为了更好地制作双向量渐变？也许我可以为HTML 5 canvas元素创建一个特定于应用程序的库???我将在位图而不是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/

enter image description here

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通道值和水平＆amp; x和y通道的垂直线性渐变从0到255。设置context.globalCompositeOperation =“更轻”是我失踪的关键。这是我需要的简单添加模式，然后尝试找到合适的alpha合成方法。以下是我写的canvas init函数。

    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)
  }

在HTML中映射颜色空间

4 个答案: