Linux & Android Dialy

Canvas関連まとめ
Canvasは2Dも3Dも描画できる
ただし、2D描画は2Dコンテキストを取得しないとダメ
塗り関連はfillStyle
線関連はstrokeStyleで
設定する
座標点の移動は
moveTo()
でする
直線を描くには
lineTo()
四角形を描画するには
fillRect()
rect()
clearRect()
strokeRect()
を使う
曲線を描くときには
二次ペジェ曲線ならquadraticCurveTo()
三次ペジェ曲線なら
bezierCurveTo()
を使う
複雑な図形、多角形などを描くには
複数のパスを組み合わせる
パスは
beginPath()で新規にパスを作成できる
パスを閉じるには
closePath()を使う
クリッピングするには、パスを作成したあとclip()を使う
画像と映像の描画は
drawImage()を使う
影は
shadowColor
shadowBlur
shadowOffsetX
shadowOffsetY
で設定する
文字の描画は
fillText()
strokeText()
を使う
文字サイズや書体は、fontに設定
文字の行揃えは textAlignで設定
不透明度は
globalAlphaで設定
線幅は lineWidth
線端の形状は lineCapで設定
ピクセルデータを読み出すには
getImageData()
ピクセルデータを描画するには
putImageData()

変数へピクセルデータ保存
Canvasのピクセルデータを読み出すには
getImageData()
を使う
getImageData()は、読み出したいピクセルの範囲をパラメータで指定する
getImageData()の書式は
getImageData(X座標, Y座標, 横幅, 縦幅)
もし、Canvas内のすべてのデータを読み出すなら
getImageData(0,0,canvasObj.width,canvasObj.height)
getImageData()は
ピクセルデータを含むオブジェクトを返す
ピクセルデータを利用したいときには
返されたオブジェクトの
data配列へアクセスする
お絵かきアプリとかで
取り消し処理したいときには
このピクセルデータをCanvasへコピーしている

ローカルストレージと取り消し機能
取り消し機能には
過去に遡り取り消しできるタイプ
一度だけの取り消し機能タイプがある
ブラウザーで
何回も取り消し可能にすると
その分メモリを消費する
このため、多くのアプリでは
取り消し可能に制限かついている
ちなみに、今回はお絵かきアプリのように
一回だけ取り消しするのが
前提にしてみた
取り消し機能を実際するには
Canvasの内容をどこかに保存しないとダメ
まず、Canvasの内容を保存するには
Canvas内にあるすべてのピクセルデータを
変数へ保存する方法があり
これは、何度も取り消しができるようにするときに使う
もう一つの方法としては
取り消し用に見えないCanvasを用意して
そこにピクセルデータをコピーする方法
CanvasのdrawImage()は
最初のパラメータに
Canvasオブジェクトを指定すると
Canvasの内容をコピーして描画できる
これは、取り消し回数が1回の時のみ使える方法
ローカルストレージへピクセルデータを保存することもできるけど
ローカルストレージには要領制限があるし
ほかのデータが入っているときに
要領制限の問題で
確実に保存できるか、わからないため
この方法は微妙

SVG
SVGは
scalable
vector
graphics
の略
SVGはHTML5の関連技術なので
HTML5の仕様には含まれない
canvasでもSVGでも
イラストや図形が描ける
canvasとSVGの違いを紹介
まず、canvas
こちらはピクセルの集まりで
グラフィックを表現
次にSVG
こちらは座標点の集まりで
グラフィックを表現
このため、毎回描画するときに計算するので
canvasより遅い
あと
canvasは
ピクセルごとにエフェクト処理できるけと
SVGでは
ピクセル単位のエフェクト処理はできない
まるでメリットなしみたいだけど
SVGにもメリットがあり
少ないデータでどのようなサイズでも
グラフィック描画ができるという利点がある
これは、canvasだと
画像を縮小したら画像が潰れたり
拡大したら、ピクセルが大きくなり
輪郭がブロックみたいなかんじになる
よくあるパソコンとかで、
ドット絵を拡大したような状態になるものを
描画したいときに
SVGなら
毎回サイズにあわせて計算するから
ベストな状態になるというのが
利点
あと、Canvasは描画するときに
Javascriptの制御が必要だけど
SVGは
XMLベースなので
HTML内に
svg要素を書いて図形を描画できる

文字の描画
文字の描画はマウスボタンがクリックされたときの
イベントを捕捉してから行う
あと、文字を描画するときには
一旦canvas全体を黒く塗りつぶしてから
行う
これは
すでにある文字の上に重なって表示されると
わかりにくいから
この処理のソースは
context.fillStyle=”black”;
context.fillRect(canvasObj.width,canvasObj.height);
となる
表示する文字は
テキストフィールドへ入力した文字なので
読み出して変数へ格納
ソースにすると
var text = document.getElementById(“char”).value;
あとは、fillText()で読み出した文字を描く
fillText()のパラメータは
書きたい文字
横幅
縦幅
これが
textに格納している文字
canvasObj.width /2
320
となる
canvasObj.width/2は
画面の大きさの半分

lineCapプロパティのパラメータ
butt
線の端まで描画
round
角を丸くして描画
square
角を四角くして描画

マウスで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;
とすれば
判別することができる
とりあえず、ここまでが
描画するときに必要なマウスの部分の処理