花束シミュレーター 第4話「参考サイト」

こんにちは、UGOKのもなかです。

引き続き制作…

canvasを利用したお絵かきアプリを作った、というサイトをいくつか参考にしながら試行錯誤してます。

今回参考にしたサイトはこちら↓

前回試作したお絵かきアプリでは、数値を入力して線の太さを調節したり、色の選択は下の画像のように自分で調節して色を選ぶようにしていました。

今回のサイトでは、スライダーで線の太さを調節したり、色のアイコンを選択することで変更ができます。

このサイトのソースコードを見てみると、

<ul>
<li style="background-color:#000000"></li>
<li style="background-color:#1b1b1b"></li>
　・
　・
　・
</ul>

このようにリストに入れていました。

自分で細かく調節できるのは前者ですが、花束シミュレーターを作るにあたって、早さや手軽さを重視したいと思うので後者を取り入れていこうと思います。

太さ・大きさもアイコンでの選択にしていきたいです。