トップページ > 日々の絵描き帖 > 絵描き帖 2019年09月-10月

絵描き帖 2019年09月-10月


絵描きツールのスクリーンショット

実寸サイズで見る 絵描きのページへ


2019年9月30日

以前に、二回目の習作で作ったものを新たに作り直してみました。
「HTML5 Canvasでお絵かきその1」というタイトルになっています。
ちょっと手間をかけてアナログ的に描いていくお絵かきツールなので、
最新のペイントソフトや画像加工ソフトに慣れている方にとっては
使いにくいかも知れません。もし良かったらお使いになってみて下さいね。

------------------------

後日使い方の説明(図解)を入れる予定です。(少し時間がかかると思います)

------------------------

とりあえず、ペンの使い方についてですが、「点線ペン」と「点線ペン2」を除いて、
「上塗ペン」「下重ペン」「陰影ペン」「明かりペン」「変化ペン」「消しゴム」は
機能はそのままでペン先の形を変える事が出来ます。丸・角・線の三通りです。

方法…例「明かりペン」で「丸ベン」のペン先を使いたい時は、最初に「丸ペン」を
クリックしてから「明かりペン」をクリックして描いて下さい。

------------------------

テクスチャ集は、パステル・クレヨン・色鉛筆のタッチを出せるようにした
透過GIFになっています。まず、ダウンロードして適当な場所に保存しましたら、
使いたいテクスチャをcanvas上にドラッグ&ドロップで入れます。(複数を重ねても可)
そして、まず、不透明の白色で「上塗り」で白く塗ります。(どんな色でもいいですが、
白色であった方が描きやすいと思います。)次に「上塗ペン」で描いてみて下さい。
透過されていない部分が着色されて透過部分は透明のままで、そうする事で
ザラザラしたタッチが出来上がります。ペンの不透明度と太さとぼかし度によって
パステル調・クレヨン調・色鉛筆調を作る事ができます。インクがなくなりそうな
かすれたようなサインペンタッチも作れそうです。

------------------------

それから、ドラッグできるミニパレットは、カラーピッカーによる色の変更が出来ます。
スマホでもドラッグできるようにいたしました。スマホ環境で色の選択や変更する時は
「Move」を「Stop」に切り替えて固定しておかないと出来ないみたいです。

移動パレット