在 HTML5 画布上创建颜色选择器答案

【问题标题】：Creating colorpicker on HTML5 canvas在 HTML5 画布上创建颜色选择器
【发布时间】：2011-10-12 17:44:41
【问题描述】：

如何在 HTML5 画布上绘制颜色选择器？

【问题讨论】：

考虑到您对问题的详尽阐述，答案可能是：“使用 for 循环”。你能告诉我们你已经尝试过什么吗？

【解决方案1】：

一个基本的例子是使用getImageData:http://jsfiddle.net/eGjak/60/。

var ctx = $('#cv').get(0).getContext('2d');

for(var i = 0; i < 30; i++) {
    for(var j = 0; j < 30; j++) {
        ctx.fillStyle = 'rgb(' + 
            ((i/30*255)|0) + ',' + 
            ((j/30*255)|0) + ',' +
            '0)';

        ctx.fillRect(i * 10, j * 10, 10, 10);
    }
}

$('#cv').click(function(e) {
    // get pixel under mouse cursor
    var data = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
    alert('rgb: ' + [].slice.call(data, 0, 3).join());
});

【讨论】：

我知道如何提取当前颜色，我不知道如何绘制它。

【解决方案2】：

我在 HCT 上为您创建了一个解决方案。你可以在这里看到它：

http://www.html5canvastutorials.com/labs/html5-canvas-color-picker/

这个想法是找到一个你喜欢的颜色选择器图像，然后在画布上绘制它。在 mousedown 事件中，我们可以获取鼠标坐标，然后使用颜色选择器图像的图像数据来选择颜色。

希望这会有所帮助！

【讨论】：

【解决方案3】：

您必须手动绘制颜色。然后你需要在那个区域监听鼠标点击，然后获取点击位置的颜色。

最大的问题是如何绘制颜色。 Drawing Color Spectrums中有几个例子。

【讨论】：