今日はモックの締め切り日ということで新しくできた魚の画像などを付け替える作業に入りました。 今までアバターは横に向いているものと正面を向いているものと2種類あり、モックでは正面を向いているアバターの画像を使う ので、正面にすると手の位置も変わり、竿の位置なども直す必要がありました。難しいことではなかったのですぐに終わり、自分のできる作業が なくなってしまいました。なので、先輩から今後canvasというものを使うかもしれないから勉強しておいて欲しいと言われたのでcanvas を調べてみることにしました。
canvasとはブラウザ上に図を描くために策定された仕様です。これまでhtml上で図を表現するには、GIFやJPEGといった フォーマットの画像を用意する必要がありました。また状況に応じて表示する図を変化させたり、アニメーションを実現するために Flashやjavaが使われてきました。canvasはFlashやjavaを使わずにjavascriptベースで図を描く事ができます。
このようにcanvasを使うと簡単に図形を描くことができるのです。まず、canvas要素のノードオブジェクトをgetElementByIdで取り出します。 getContextメソッドは２Dという引数のみを受け付けます。getContextメソッドから得られた２Dのオブジェクトをctxに格納します。 図を描く際には、２Dコンテキストとなるオブジェクトctxを通して命令を記述して行きます。
1.線を描くと宣言します。:ctx.beginPath();
2.書き始める場所を指定します。:ctx.moveTo(20,20);
3.引きたい線の終点を指定します。:ctx.lineTo(120,20);
4.引きたい線の終点を指定します。:ctx.lineTo(120,120);
5.引きたい線の終点を指定します。:ctx.lineTo(20,120);
6.描いた線を閉じます。:ctx.closePath();
7.できた図形を線で描画します。:ctx.stroke();
3-5で使ったlineToメソッドは、現在の座標から引数に指定した座標に向けて直線を描くメソッドです。 6のclosePathメソッドは、描いた図を直線を使って自動的に閉じてくれる便利なメソッドです。 7のstrokeメソッドは、これまで描いてきた図形を線で描画するメソッドです。このメソッドを呼び出さない限り、 ブラウザ上には表示されません。
canvasはこのように図を描くことができるのはもちろん、javascriptとあわせることにより、この図形などを動かしたり する事もできるそうです。使い方もいろいろあり、canvasを使いこなせるようになれば、いろいろな場面で役に立つような 気がしました。
12月19日 宮本 勇