お絵かきできるSNSを作りたい！5
7330 ワード
お久しぶりです。
今回は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');
}
}
}
完成です。キャンパスサイズも大きくしました！
次回は今回作ったボタンやパレットをキャンバスに反映させていきます。
Author And Source
この問題について(お絵かきできるSNSを作りたい！5), 我々は、より多くの情報をここで見つけました https://qiita.com/cardcapt/items/c7436295ffc359c42126著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .