Javascript HTML中颜色空间的映射

所以我试图用HTML来映射颜色空间，而我的知识仅限于CSS HTML和Javascript。我正在寻找一种方法来构造一个二维梯度，沿2个向量有2个变量。我的研究表明，CSS和SVG技术只能处理一维GRDAIENT。或者说线性梯度只能有一个向量。所以为了弥补这个限制，我使用JS来迭代我需要的256个更改，这样我就可以在2个RGB颜色通道上获得渐变。因此，如果你想画一个x轴，它是相对的，例如，红色和梯度从0到255，y轴也是相对的，绿色和梯度从0到255，但是用JS迭代代替CSS线性梯度

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

我之所以制作这个web应用程序，是因为我在当前基于web的颜色选择器中看到的局限性，Z轴每次更改256步循环将给程序带来不可接受的计算开销

---

有没有更好的方法来生成双向量梯度？也许我可以为HTML5画布元素创建一个特定于应用程序的库？？？如果我使用位图而不是DOM元素，可能会大大降低每次调用的处理器成本？

您可以使用该元素

基本上，您希望创建两个线性渐变，一个水平渐变，一个垂直渐变，从透明渐变到您想要的任何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);
    }

---

下面是一个简单的示例，演示如何使用每像素控制在画布上创建任意渐变：

colorField（myCanvas，500500，pretty）；
函数颜色字段（画布、宽度、高度、颜色查找）{
var w=宽度-1，h=高度-1；
画布宽度=宽度；
canvas.height=高度；
var ctx=canvas.getContext（'2d'），
idata=ctx.getImageData（0,0，宽度，高度），
数据=idata.data；
对于（var x=0；x谢谢大家），我能够使用canvas元素来计算它。我对z通道值使用桶填充，对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)
  }

使用一种非常类似的方法，我能够为HSL颜色空间创建一个有效的覆盖，但是，我不认为可以对其进行调整，以产生我在RGB颜色空间中寻找的结果。我将进一步使用它，看看是否可以想出一些有效的方法。如果所有其他方法都失败，我可以使用改进的方法为画布编写一个小库，我将我一直认为线性梯度法可以从“模式”中获益。FWIW我的计算机需要40毫秒才能用复杂的颜色查找填充三张300×300的画布。
    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)
  }