カラーパレッドを実装していきたいと思います。
↓この部分
このままでも良いのですが、好きな色を追加出来る用にもした方がいい気がしてきたので、その他というパレットも追加します。
後々、カラーセット機能を用意してDBに保存させたいですね。
その他：<input type="color" id="color_other" name="color" onChange="Color(this);">
onchageイベントを付与しました。
JavaScriptやjQueryでバインドしても良いのですが、それだと後からどの要素にイベントが入っていたか分かりにくいので直接書く派です。
↓ということで、１番下にその他を追加。
前回作った色の四角形を選択した時に枠線を付けているColorという関数があったので、それを改造します。
//カラー設定用変数（デフォルトは黒）
var strStrokeStyle="#000000";
//カラー選択関数
function Color(obj){
for ( i = 1; i <= 15; i++ ) {
id_name = "color_" + i;
if (id_name == obj.id){
id_name2 = "#" + id_name;
document.getElementById(id_name).classList.add('active');
} else {
document.getElementById(id_name).classList.remove('active');
}
}
if (obj.id == "color_other"){
strStrokeStyle = $("#color_other").val();
} else {
strStrokeStyle = "#" + $(id_name2).css("background-color").match(/\d+/g).map(function(a){return ("0" + parseInt(a).toString(16)).slice(-2)}).join("");
}
}
追加したのはid_name2変数の追加と↓以下の部分です。
if (obj.id == "color_other"){
strStrokeStyle = $("#color_other").val();
} else {
strStrokeStyle = "#" + $(id_name2).css("background-color").match(/\d+/g).map(function(a){return ("0" + parseInt(a).toString(16)).slice(-2)}).join("");
}
その他を押した時は、タグのidが”color_other”なので[type="color"]の値を取得・それ以外の場合は選択した四角形の背景色を取得しています。
type="color"は、そのままだと10進数のRGB表記だったので、上と揃えようと思い16進数表記への変換も行っています。
ここに来てjQueryが無い事に気が付き追加しました。
3系で問題無いのですが、古参なのでIEも考慮し1系で。
color関数の上のfor文はjQueryなら数行で収まるはずですが、この程度のループなら速度的にも影響ないかなそのままにしました。
そして、最後にグローバルなstrStrokeStyle変数に格納した情報をcanvasのgetContextでstrokeStyleが取得出来る用にします。
ct.strokeStyle=strStrokeStyle;
かくして、色の変更が可能になりました。
