第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レコードのデータを削除
◆ハンズオンタイム
講師が用意したサンプルを用いながら、
お絵かきキャンバスの作成＋クリアボタンの追加を行いました！
今回も新しいことが学べて楽しかったです♪
