在HTML5畫布上創建colorPicker

如何在HTML5畫布上繪製colorpicker？在HTML5畫布上創建colorPicker

2011-07-25 Mark

考慮到您的問題的詳盡闡述，答案可能是：「使用for循環」。你能告訴我們你已經嘗試過了嗎？ – MeLight

一個基本的例子是使用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()); 
});

來源

2011-07-25 16:18:56 pimvdb

我知道如何提取當前顏色，我不知道如何繪製它。 – Mark

您必須手動繪製顏色。然後，您需要聽取該區域的鼠標點擊，然後在點擊位置獲取顏色。

最大的問題是如何繪製顏色。 Drawing Color Spectrums中有幾個例子。

來源

2011-07-25 16:10:00 Jonas

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

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

的想法是找到你喜歡的顏色選擇器圖像，然後畫在畫布上。在mousedown事件中，我們可以獲取鼠標座標，然後使用顏色選擇器圖像的圖像數據挑選出顏色。

希望這會有所幫助！

來源

2011-09-20 03:32:30

在HTML5畫布上創建colorPicker

回答

相關問題