在HTML5畫布上創建顏色選擇器

Question

如何在HTML5畫布上繪制顏色選擇器？

Answer 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());
});

Answer 2

我為您在HCT上創建了一個解決方案。 在這里你可以看到它：

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

這個想法是找到您喜歡的顏色選擇器圖像，然后將其繪制在畫布上。 在mousedown事件中，我們可以獲取鼠標坐標，然后使用顏色選擇器圖像的圖像數據來選擇顏色。

希望這可以幫助！

Answer 3

您必須手動繪制顏色。 然后，您需要在該區域中監聽mouseclick，然后在單擊位置獲得顏色。

最大的問題是如何繪制顏色。 在“ 繪制色譜圖”中有一些示例。