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

色を手動で描画する必要があります。次に、その領域のマウスクリックを聞いて、クリック位置で色を取得する必要があります。

最も大きな問題は、色を描く方法です。 Drawing Color Spectrumsにはいくつかの例があります。

Answer 3

私はHCTのソリューションを作成しました。あなたはここでそれを見ることができます：

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

アイデアは、あなたが好きなカラーピッカーの画像を検索し、キャンバス上に描画することです。 mousedownイベントでは、マウス座標を取得し、カラーピッカーイメージのイメージデータを使用して色を選択することができます。

希望すると便利です。