2014年08月07日

canvasタグについて、わすれないうちにまとめておく。

課題でcanvasタグのあれこれをがしがし使ったので、忘れないうちにまとめておくことにする。
わりとおもしろいし、いろいろ使えそうな感じある。たのしそう。

対応ブラウザについて
HTML5 & CSS3 Web Designによると、IE8以前のブラウザではCanvasタグが使えないようです。
まあ、そこまで古いブラウザに対応する必要があるかというと……どうなんだろう?
ちなみに今回はFirefox周りだったので、ブラウザが対応してない! なんて事態は発生しませんでした。よかったよかった。

canvasタグの使い方
とりあえず、canvasを使いたいところに、タグを設置します。
<canvas>対応ブラウザでみてね(はぁと)</canvas>
タグの間には、対応していないブラウザで見たときに表示される文言を書くことが出来ます。
//っちゅーても最近のブラウザは大体対応してるみたいですが、、、古い環境の人もいますからね、、、

幅と高さはwidth、heightを使って指定できます。指定がない場合は300×150になるらしいです。(Firefoxの場合。他のブラウザは自分で検証してね!)
<canvas id="example" width="100" height="100">対応ブラウザでみてね(はぁと)</canvas>
こんな感じですね。

実際に図形を描画してみる
実際に図形を描画する前に、まずは座標についておさらいしておきます。
手書きの図でごめんなさいですが、下の画像をご覧ください。
canvas.jpg
横がx軸、縦がy軸で表されて、左上が始点となっています。
たとえば上の図なら(サイズは適当ですが)、60*30の領域を準備した、ってことになってますね。
これさえ覚えておけばあとはなんとかなる。たぶん。

で、こんなコードをざっくり書いてみる。
描画結果はこちら
枠線の色はカラーコードだけじゃなくて、RGB(A)でも指定できるみたいです。
やってることはだいたいコメントに書いてありますが、わかんないときはリファレンス見ましょう。

個人的に書き方でびみょーにひっかかったのはここ。
context.strokeRect(30,30,130,160);
前ふたつが基点、うしろ二つが大きさ、と覚えておけばだいたい問題がなさそうです。

それ以外にもいろいろとあるので、詳しくは Canvas - HTML5.JP とかを見てください(丸投げ)
今回の例では四角を書きましたが、丸を書いたり線を引いたり、書いたものを消したりできます。ちゃんとつくればお絵かきできます。\たのしい/

あの、canvasタグで書いたものを保存したいんですが、できるの?
できる。
Saving canvas data to image fileあたりを参考に。
canvas2image.js、base64.jsを読み込んで、こんな感じのコードをかきませう。
PNG以外にも、Jpegでも保存できるっぽい。
ただし、これだと拡張子つかないので、そこは注意してね。

ではでは。
posted by Dahlia* at 08:42| Comment(0) | Webまわり
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: