お久しぶりです。
今回はUI部分を整えていこうと思います。
取り立てて難しい事をしないのでダイジェストです。
背景を水色にしました。
body {
background-color:#BFE3F5;
}
CANVASの背景を透明から白色に。
#canvas {
background-color:#FFF;
}
カラーパレッドも追加します。
<table id="palette_colors">
<tr>
<td id="color_1" class="active" onClick="Color(this);"></td>
<td id="color_2" onClick="Color(this);"></td>
<td id="color_3" onClick="Color(this);"></td>
<td id="color_4" onClick="Color(this);"></td>
<td id="color_5" onClick="Color(this);"></td>
</tr>
<tr>
<td id="color_6" onClick="Color(this);"></td>
<td id="color_7" onClick="Color(this);"></td>
<td id="color_8" onClick="Color(this);"></td>
<td id="color_9" onClick="Color(this);"></td>
<td id="color_10" onClick="Color(this);"></td>
</tr>
<tr>
<td id="color_11" onClick="Color(this);"></td>
<td id="color_12" onClick="Color(this);"></td>
<td id="color_13" onClick="Color(this);"></td>
<td id="color_14" onClick="Color(this);"></td>
<td id="color_15" onClick="Color(this);"></td>
</tr>
</table>
選択中の色を分かりやすくするためクリックイベントを追加しました。
//カラー設定用変数（デフォルトは黒）
var strColor="#000000";
//カラー選択関数
function Color(obj){
for ( i = 1; i <= 15; i++ ) {
id_name = "color_" + i;
if (id_name == obj.id){
document.getElementById(id_name).classList.add('active');
} else {
document.getElementById(id_name).classList.remove('active');
}
}
}
完成です。キャンパスサイズも大きくしました！
次回は今回作ったボタンやパレットをキャンバスに反映させていきます。