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

【问题标题】：Generating a canvas color picker with full rgb space生成具有完整 rgb 空间的画布颜色选择器
【发布时间】：2014-01-22 23:47:13
【问题描述】：

由于 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'));

JSFiddle：http://jsfiddle.net/yH6JE/

我很难弄清楚如何在中间生成这个正方形。基本上我希望最左边中间的颜色与环上的颜色相同 - 我通过点击选择了。

如何生成这种渐变方块？

【问题讨论】：

我建议将您的正方形从您当前使用的布局更改为 Google Chrome 检查器使用的布局，类似于 i.imgur.com/qTMpBqt.png。你也可以这样吗？如果你愿意，我可以发布你需要的代码作为答案。
哦，是的——那很好。特别是如果这会生成更干净、简单和可读的代码
Here is the script。它使用更传统的颜色选择器布局。

标签： javascript html canvas gradient color-picker

【解决方案1】：

如果您愿意，也可以使用圆圈。我认为这样选择颜色更容易。

我做了这个： https://github.com/JeroenvO/html5-colorpicker

也许您可以将其用作指南。我只使用了一些不透明的图像，并且在 javascript 中没有梯度计算。

【讨论】：

【解决方案2】：

看起来你想要一个 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);
    }   
}

希望它能满足您的需求。此处示例：colour rect js fiddle

【讨论】：