HTML5で作ったお絵かきツールに少し機能を追加＆修正。
関連記事：
HTML5でお絵かきツールを作ってみた
HTML5でお絵かきツールを作ってみた(2)
- ブラシに透明度を設定できるようにしてみました。
- ブラシ幅も数字でも確認できるよう修正。
- 消しゴムがカクカクしてたのを滑らかに消せるよう修正。
消しゴムはclearRectじゃなくて合成のプロパティglobalCompositeOperationを使えばよかったんだな…。
■透明度を設定する
ふとスライダーを使えば線の幅と同じように透明度も設定できるんじゃ…？と思いつき、やってみました。スライダーはidを変えるだけでいくつでも使えるようです。これは便利。
HTMLに以下を追加（id名はお好みでOK）。
<div id="slider2"></div>
JavaScriptに以下を追加（HTMLのidと揃えること）。
$('#slider2').slider({
min: 1,
max: 100,
value : 100, // 初期値（不透明）
slide : function(evt, ui){
alpha = ui.value;
if(alpha == 100){
alphaSize = 1;
}else if(alpha <= 9){
alphaSize = '0.0' + alpha;
}else if(alpha >= 10){
alphaSize = '0.' + alpha;
}
}
});
$('canvas').mousemoveのブラシ設定に以下を追加。
context.globalAlpha = alphaSize;
透明度は0.0（完全な透明）～1.0（不透明）の範囲で使えるようです。ブラシを完全な透明にしたら意味がないので、ここでは0.01から使うようにしました。使用例を以下に。
上から
100(globalAlpha=1)100% 不透明
20(globalAlpha=0.20)20%
10(globalAlpha=0.10)10%
5(globalAlpha=0.05)5%
1(globalAlpha=0.01)1%
実物大です。
実はこれ、けっこう使いこなしが難しいです…。かなり薄くしないと透明効果が出てこないし、描くスピードで濃淡も微妙に変わるんですね。速く描けば薄くなるが線の軌跡が目立ってくる。ゆっくり描けば軌跡は目立たなくなるが色もその分濃くなる。軌跡を目立たなくかつ薄くきれいに描くにはけっこうコツが要る感じ。例はタブレットペンで描いてますが、マウスでは難しいかな？
また透明度を入れたブラシを下手に塗り重ねると汚くなってくるので、いろいろ試して使いどころのポイントを掴まないと難しいなあと思いました。部分的に効果として使えば面白いかも。
パステルには最初から透明度が設定してあるので、スライダーの透明度は適用されません。消しゴムも透明度は効かないようにしてあります。
ま、スライダーをもっと活用してみようじゃないか～という趣旨で設置してみたんです、ということで(^^;。
そういえばスライダーを使えば自前でカラーピッカーを作れることにも気付いたけど、カラーピッカーは今お借りしてるのが直感的に使いやすいので、このままでいくつもりです。