カテゴリー: 未分類

マウスでCanvas描画
まず、マウスポインタがCanvasにあるか判別
これには
mousemoveイベントを使う
Canvasにないなら、そこで終了
canvasObj.addEventListener(“mousemove”,fuction(evt){
さらに、判定
今度はマウスボタンを押しているか
判定
もし、判定して押してないなら
その後の処理は不要だから終了
if(!canvasObj.drawFlag){
return;
}
ここまで、判定を通ってきたら
マウスの座標を調べる
var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;
そして、座標を線で結んでいく
結ぶには
前回の座標と、今の座標を直線で描画すればok
strokeStyleで色を設定
lineWidthで線の幅
lineCapで roundを指定すると線の端が丸くなるのでこれを指定
beginPathでパスを生成し
moveTo()とlineTo()で座標を指定
ちなみにパラメータは
moveTo(前のX座標, 前のＹ座標)
lineTo(今のX座標, 今のY座標)
となる
そして、後は
stroke()で実際線を描く
strokeを書かないと、場所を指定しただけなので注意

描画のときの処理
実際に、canvasに描画するには
canvasObj.addEventListener(“mousemove”,fuction(evt){
if(!canvasObj.drawFlag){
return;
}
var x=evt.offsetX||evt.layerX;
var y=evt.offsetY||evt.layerY;
context.strokeStyle=”rgba(255,255,255,1)”;
context.lineWidth=10;
context.lineCap=”round”;
context.beginPath();
context.moveTo(canvasObj.oldX,canvasObj.oldY);
context.lineTo(x,y);
context.stroke;
context.closePath();
canvasObj.oldX=x;
canvasObj.oldY=y;
},false);
では、恒例の解説へ
まず、マウスポインタがcanvasにあるかを判定する
これは、mousemoveイベントを使う
canvasObj.addEventListener(“mousemove”,fuction(evt){
マウスボタンが押されたら
押されたら場所のx,y座標を求め
Canvasオブジェクトの
oldXoldY
へ代入
このときに、格納する
oldX
oldY
は自作の変数
あと、マウスの座標はEventオブジェクトに入っているので
offsetX
offsetY
を読み出せば、x,y座標を取得できる
ただし、firefoxの場合は別で
layerX
layerY
に格納されている　
このため
||を使って、どちらでも対処可能にする
||は論理演算子のOR
ここをソースにすると
canvasObj.oldX=evt.offsetX||evt.layerX;
canvasObj.oldY=evt.offsetY||evt.layerY;
続いて、マウスのボタンを押している状態か、それとも押していない状態か判別するため
フラグを作る
押した、押さないだけなら
clickイベントでいいけと
押したままというイベントはないので
これはフラグで対応する
ということで、
mousedownイベントなら
マウスを押した状態なので
このときに
drawFlag=true
にする
逆に、マウスを離したときには
mouseupイベントのときに
drawFlag=false;
とすれば
判別することができる
とりあえず、ここまでが
描画するときに必要なマウスの部分の処理

Androidアプリのアイコン設定の項目
アイコン設定が英語なので
解説
Foreground
作成する画像のタイプを選択
Trim Surrounding Blank Space
チェックを入れるとスペースのトリミングをする
Additional Padding
画像の余白設定
Foreground Scaling
Foregroundの画像のクロップ設定
Shape
アイコンの形
Background Color
背景色
Foreground Color
Foregroundの画像の色
Foregroundの設定項目は
Image
パソコンの中から画像を選択
Clipart
用意されている画像から選ぶ
chooseを押すと候補がでてくる
Text
文字を書く
よう書籍アプリとかであるタイプ
Arial Boldで、さらに細かい設定ができる
続いて、Foreground Scalingの項目
Crop
はみ出た部分のクロップを行う
Center
アイコンの中心に表示
Shapeでの設定
None
背景画像を指定しない
Square
正方形の背景にする
Circle
円形のアイコンにする

マウスで描画する仕組み
マウスで描画する仕組みのメモ
Canvasでクリックされたら
マウスの座標を
oldX
oldY
へ保存
マウスボタンの押した、押さないの識別のため、
フラグをつくり
このフラグはdrawFlagへ保存
で
drawFlag=trueなら、Canvasへ描画
drawFlag=falseなら、描画しない
これが、最初の処理
次は、描くときの処理
drawFlagがtrueなら
oldX
oldY
から、現在のマウスの座標まで
直線を描画
あとは、マウスを離したときの処理
マウスを離すと
drawFlag=false;
になるので、描画をやめる

マウスで描くための準備
マウスの動きはmousemoveイベントで補足
次に
マウスボタンの押されている状態は
mousemoveイベント内で調べるか
マウスボタンを押したときに発生するmousedownイベントを利用して調べる
mousedownイベントの場合は
イベントハンドラ内でマウスイベントの状態を変数なとに記憶しておいて
mousemoveイベントから呼び出される
イベントハンドラ内で参照する
マウスボタンの状態以外で
保存しておくのがあり、それが
線を引き始めたときのマウスの座標
マウスで文字を書くなら
座標を点にして、これらを線で結ぶようになる
このため、始点になる古い座標、つたり前の座標も必要
これらの情報は
Canvasオブジェクトにプロパティを追加し
そこに保存する
プロパティにすれば、識別できるから
あとは、これでコントロールできる

Canvasの塗りつぶしかた
Canvas全体を塗り潰すには
fillRect()を使う
パラメータは、左から
始まりのx座標,
始まりのy座標,
横幅,
縦幅
ソースにすると
context.fillStyle=”black”;
context.fillRect(0,0,canvasObj.width,canvasObj.height);
fillStyleは塗り潰す色の指定

canvasの文字へ影を描画
袋文字を影付きで描画するには
textAlignを設定する
textAlignを設定しないと自動的に
startになる
startは左揃えになる
ただし、注意点として、
startとendは
CSSの筆記方向に依存するので
もし、CSSで右から左になっていると
右揃えになる
textAlignで指定できる位置は
start
左揃え
left
左揃え
center
中央揃え
right
右揃え
end
右揃え
袋文字は少し透明にして描画
描画する図形やパスの不透明度は
globalAlphaプロパティで設定できる
数値は0~1.0で設定し
0なら透明
1.0なら不透明
0.5なら半分くらい透明
これらを設定したら影を描画
影を付けるのは文字だけじゃなく
画像とか図形にも付けられる
このため、設定を間違えると
文字だけじゃなく全部に影がつく
影を付けるなら、以下の4つのプロパティへ設定する
shadowColor
影の色
shadowBlur
ぼかし具合
shadowOffsetX
横のずらし具合をピクセル単位で設定
shadowOffsetY
縦のずらし具合をピクセル単位で設定

canvasへ文字を描画
canvasへ文字文字の描画ができるので
これを使えばテキストへグラデーションを付けたり
図形の変形もできる
描画できる文字は、通常の文字と
袋文字
袋文字は、輪郭を線で構成した文字のこと
文字を塗り潰す色、つまり文字の色は
fillStyleで指定する
なぜ、塗り潰すという表現になるかというと
ポスターなどの文字でレタリングで
中を塗り潰すのとおなじで文字を枠で描き
中身を塗り潰すから
描画する文字サイズや書体は、
fontプロパティで行う
設定はCSSとおなじ要領
コードにすると
context.font=”normal bold 64pt ‘italic'”;
ここまでで、下準備は完成
あとは、文字の描画
文字の描画には、fillText()を使う
fillText()の構文は
fillText(
“表示したい文字”,
X座標,
Y座標
)
となる
このときの注意点として、Y座標が
文字の一番上ではなく
ベースラインと呼ばれる位置を基準にしているということ
なのでYを0にすると
場合によっては下半分しかでないこともある
ベースラインの設定は
textBaselineプロパティで設定できる
例を書くと
top文字の一番上
hanging
一番上と真ん中の間
middle
文字の真ん中
alphabetic
真ん中とideographicの間
ideographic
alphabeticと一番したの間
bottom
一番下

Canvasでのグラデーション描画
Canvas 2D Context APIの種類は２つ
直線グラデーション
と
円形グラデーション
直線グラデーションは
上から下へだんどんと色が変わる
円形グラデーションは
内側から外側へ広がるように色が変わる
直線グラデーションの構文は
createLinearGradient(
始まりのx座標,
始まりのy座標,
終わりのx座標,
終わりのy座標
)
円形グラデーションの構文は
createRadialGradient(
内側の円のx座標,
内側の円のy座標,
内側の円の半径
外側の円のx座標,
外側の円のy座標,
外側の円の半径
)
となる
円形グラデーションは内側の円から
外側の円へ向かうので
内側が始まり、外側が終わりと考えるとわかりやすい
また
canvas手は、グラデーションは塗り扱いなので
fillStyleプロパティへグラデーションを指定する
ただし、直接色の指定はできないため
グラデーションオブジェクトを設定する
このグラデーションオブジェクトを生成するのが
createLinearGradient()
や
createRadialGradient()
になる
グラデーションにするには、いくつか色の指定が必要
この色を設定するのが
addColorStop()
addColorStop()のパラメータは
位置と色
つまり
addColorStop(位置,色)
となる
位置は、0~1.0で指定
0は開始位置
1.0が終了位置
もし、半分なら0.5になる
色は、redとこのCSSて指定するときと同じ
もし、白から黄色、赤へ変わるように設定するなら
gradObj.addColorStop(0,”white”);
gradObj.addColorStop(0.5,”yellow”);
gradObj.addColorStop(“red”);
となる
設定が、できたら
グラデーションオブジェクトをfillStyleへ代入
後は図形を作成して塗りつぶせばグラデーションが完了する
また、一度作成したグラデーションオブジェクトは
使い回しが可能

ほかのcanvasへ描かれた内容の描画
CanvasそのものをCanvasへ画像として
描画するには
drawImage()の最初のパラメータへ
canvas要素を指定する
canvas要素で透明になっている部分も反映されるため
複数のcanvasを合成させることもできる
お絵かきアプリとかではこういった
機能を使うことで実装可能