HOME

{ ColorPicker A : javascript }

{ svg, javascript で作成したプログラム一覧 }

推奨 ブラウザ : chrome

click-00
click-01

bbbb

cccc
click-03

HTML タグの canvas と javascript を使用してカラーピッカーを作成してみました。
上のテキスト部をクリックするとカラーピッカーが現れると思います。
チェックボックスにチェックを入れるとテキストに色がつき、
チェックを外すと背景に色がつきます。
参考にしたのは、 chrome ブラウザのデベロッパーツールにあるカラーピッカーです。
透明度の設定は、後回しにして、、
縦、横の色の選択は、出来ると思うのですが、奥の色の選択が出来ていません。
奥?(; ・`д・´)
カラーピッカーの上部の canvas 要素で細かい色の選択が出来ると思うのですが、
下の canvas 要素のイベントとの連動が出来ていません。
デベロッパーツールにあるカラーピッカーでは、
上部で色を選択後、下のスライドバーを動かすと値が変化、、、ンンンん
この時の値変化がわからない。
色を選択するポインタが、一番左にある場合は、下のスライドバーを動かしても値の変化なし。
それ以外は、スライドバーを動かすと値が変化。
赤、緑、青、の中の最大値と最小値の差で、値が変化しているらしい??
赤プラス、緑マイナス、青プラス、赤マイナス、緑プラス、青マイナス、、、、
たぶんこんな感じ。。。
カラーピッカーを google で検索すると、検索結果の一位に
google 製のカラーピッカーが、、、
これ、すごく動作軽いです。
作成したの激重なので、タイマーで処理を遅らせて、誤魔化してます。

その後、色々試して、chrome のカラーピッカーと同じように、
上部の canvas の色と下部のカラーバーを動かした時のイベントを連携させることが出来ました。
色を十進数で表記すると、三原色の赤、緑、青のそれぞれの値は、 0 ~ 255
これらを組み合わせると、6,777,216通りの色を表現出来る???
chrome のカラーピッカーのスライドバーを動かすと、
最小値と、最大値の値が同じになります。
配列の長さを 256 個で作成してみると、256 個で一周させることは出来たのですが、
最初と最後の値を同じにすることが出来ませんでした。
色々と試したのですが、うまく行きませんでした。(*'ω' *)
テキストボックスに16進数6桁入力で近似色?にジャンプするようにしました。

数学の勉強をやり直ししてたりします。_´ω`)_