第2回GTUG-girls（HTML5 Canvas編)

第2回のGTUG-girls＠ニフティに参加してきました♪
今回はHTML5のCanvas編。
HTML5、ずっと気になっていたのです。

レポートはこちら。


◆なごみタイム
今回はポットラック式。
女性が多いので、お菓子がいっぱい（笑）
第1回に来た人も、今回初めての方もいて、新たな交流ができました。

◆説明タイム
講師は山崎大助さん。イケメンです（＾＾）
Canvasってどんなもの？ということからまずはデモ。

Canvas要素

<canvas id="***" width="" height="">

Canvasを描きたい所に下記のタグを追加します。

属性はこれだけ。
・id: ユニークID
・width:幅
・height:縦

※サイズ指定はstyle属性でも使用できるが、違ったふうになってしまうらしいです

コンテキスト
canvas要素はgetContext()のメソッドを持っている。引数は1つで、現在は"2d"のみです。将来"3d"出るのかな？といった所です。

var can = document.getElementById("drowarea"); //CanvasElement
var context = can.getContext("2d"); //描画するための描画Objectを準備！

座標と短形
座標は左上の(0,0)から相対的に数えます。

Canvasでは点、線、3角形、4面体の表現ができます。
3つの関数があり、それぞれx,y,width,heightの引数を取ります。
・fillRect(x,y,width,height)
・strokeRect(x,y,width,height)
・clearRect(x,y,width,height)


スクリプトは、上から順に読み込みますので、下の方に書かれた要素を上のほうで呼んでしまうとエラーになるので、それを防ぐために window.onload を利用します。

window.onload=function(){
drawShape();
}

最近ではスクリプト部を下の方に書くことも多いそうです。


HTML5で作られた歯医者さんのカルテを見せてもらい、
こういう使い方があるんだぁ、と思いました。

パス（線）
線を描くには下記の関数を順に呼び出します。

context.beginPath();//初期化処理で、始点が(0,0)になる
context.moveTo(); //始点の座標
context.lineTo(); //終点の座標
context.stroke(); //線をつなぐ
context.closePath(); //閉める

始点(moveTo)と終点(lineTo)を設定して、線を描く(stroke)を書けば、線を引いてくれるのです。
開始と終了はbeginPath と closePath が必要です。

Local Storage
ブラウザにデータを保存することができます。
保存に関しては、下記ファンクションを呼び出すだけです。

localStorage.getItem(KEYネーム); //データ取得
localStorage.setItem(KEYネーム, 値) //データ登録or更新
localStorage.clear();// データを全削除
localStorage.removeItem(KEYネーム); //1レコードのデータを削除


◆ハンズオンタイム
講師が用意したサンプルを用いながら、
お絵かきキャンバスの作成＋クリアボタンの追加を行いました！

今回も新しいことが学べて楽しかったです♪