Javascript 生成具有完整rgb空间的画布颜色选择器

因为RGB需要一个立方体来显示所有的颜色，所以有更多的方法来显示所有的颜色。我想有一个圆圈，以全色显示彩虹中的所有颜色，当点击显示选定颜色在其自己的小2D空间中的所有不同亮度时

我想使用画布生成类似于此图像的内容：

我的尝试是：

Javascript:

function ColorPicker(element) {
    this.element = element;

    this.init = function() {
        var diameter = this.element.offsetWidth;

        var canvas = document.createElement('canvas');
        canvas.height = diameter;
        canvas.width = diameter,
        this.canvas = canvas;

        this.renderColorMap();

        element.appendChild(canvas);

        this.setupBindings();
    };

    this.renderColorMap = function() {
        var canvas = this.canvas;
        var ctx = canvas.getContext('2d');

        var radius = canvas.width / 2;
        var toRad = (2 * Math.PI) / 360;
        var step = 1 / radius;

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        for(var i = 0; i < 360; i += step) {
            var rad = i * toRad;
            ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
            ctx.beginPath();
            ctx.moveTo(radius, radius);
            ctx.lineTo(radius + radius * Math.cos(rad), radius + radius * Math.sin(rad));
            ctx.stroke();
        }

        ctx.fillStyle = 'rgb(255, 255, 255)';
        ctx.beginPath();
        ctx.arc(radius, radius, radius * 0.8, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();

        // render the rainbow box here ----------
    };

    this.renderMouseCircle = function(x, y) {
        var canvas = this.canvas;
        var ctx = canvas.getContext('2d');

        ctx.strokeStyle = 'rgb(255, 255, 255)';
        ctx.lineWidth = '2';
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.stroke();
    };

    this.setupBindings = function() {
        var canvas = this.canvas;
        var ctx = canvas.getContext('2d');
        var self = this;

        canvas.addEventListener('click', function(e) {
            var x = e.offsetX || e.clientX - this.offsetLeft;
            var y = e.offsetY || e.clientY - this.offsetTop;

            var imgData = ctx.getImageData(x, y, 1, 1).data;
            var selectedColor = new Color(imgData[0], imgData[1], imgData[2]);
            // generate this square here.

            self.renderMouseCircle(x, y);
        }, false);
    };

    this.init();
}

new ColorPicker(document.querySelector('.color-space'));

函数颜色选择器（元素）{
this.element=元素；
this.init=函数（）{
变量直径=this.element.offsetWidth；
var canvas=document.createElement（'canvas'）；
画布高度=直径；
画布宽度=直径，
this.canvas=画布；
这个.renderColorMap（）；
元素。追加子元素（画布）；
这是setupBindings（）；
};
this.renderColorMap=函数（）{
var canvas=this.canvas；
var ctx=canvas.getContext（'2d'）；
变量半径=画布宽度/2；
var toRad=（2*Math.PI）/360；
var步长=1/半径；
clearRect（0，0，canvas.width，canvas.height）；
对于（变量i=0；i<360；i+=步长）{
var rad=i*toRad；
ctx.strokeStyle='hsl（'+i+'，100%，50%）；
ctx.beginPath（）；
ctx.moveTo（半径，半径）；
ctx.lineTo（半径+半径*数学坐标（rad），半径+半径*数学坐标（rad））；
ctx.stroke（）；
}
ctx.fillStyle='rgb（255，255，255）'；
ctx.beginPath（）；
ctx.弧（半径，半径，半径*0.8,0，数学PI*2，真）；
ctx.closePath（）；
ctx.fill（）；
//在这里渲染彩虹框----------
};
this.rendermousecycle=函数（x，y）{
var canvas=this.canvas；
var ctx=canvas.getContext（'2d'）；
ctx.strokeStyle='rgb（255，255，255）'；
ctx.lineWidth='2'；
ctx.beginPath（）；
弧（x，y，10，0，Math.PI*2，真）；
ctx.closePath（）；
ctx.stroke（）；
};
this.setupBindings=函数（）{
var canvas=this.canvas；
var ctx=canvas.getContext（'2d'）；
var self=这个；
canvas.addEventListener（'click'，函数（e）{
var x=e.offsetX | | e.clientX-this.offsetLeft；
变量y=e.offsetY | | e.clientY-this.offsetTop；
var imgData=ctx.getImageData（x，y，1，1）；
var selectedColor=新颜色（imgData[0]、imgData[1]、imgData[2]）；
//在这里生成这个正方形。
自渲染圆（x，y）；
}，假）；
};
this.init（）；
}
新的颜色选择器（document.querySelector（'.colorspace'）；

JSFiddle：

我很难弄清楚如何在中间产生这个正方形。基本上，我希望最左边中间的颜色与戒指上的颜色相同——我通过单击选择的颜色

---

如何生成这种类型的渐变正方形？

看起来您需要一个HSL颜色矩形，色调从色轮中选择

下面是我用来绘制矩形的一个函数：

function draw(canvas, hue){
    var ctx = canvas.getContext('2d');
    for(row=0; row<100; row++){
        var grad = ctx.createLinearGradient(0, 0, 100,0);
        grad.addColorStop(0, 'hsl('+hue+', 100%, '+(100-row)+'%)');
        grad.addColorStop(1, 'hsl('+hue+', 0%, '+(100-row)+'%)');
        ctx.fillStyle=grad;
        ctx.fillRect(0, row, 100, 1);
    }   
}

函数绘制（画布、色调）{
var ctx=canvas.getContext（'2d'）；
对于（row=0；row，如果您愿意，也可以使用圆形。我认为这样选择颜色更容易

我做了这个：

也许你可以用它作为指导。我只使用了一些不透明度的图像，在javascript中没有梯度计算。
我建议将你的正方形从当前使用的布局更改为Google Chrome inspector使用的布局，看起来像。这对你也行吗？如果你想，我可以发布代码，你需要在这是一个答案。哦，是的-那太好了。特别是如果这将生成一个更干净、简单和可读的代码。它使用更传统的颜色选择器布局。