その99。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「図形(上級)」の「DataURL Scheme に変換した描画情報を画像として保存しよう(jpg)」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
白い背景上に何か書き込み下のSAVEボタンをクリックすると別ウインドウもしくはタブで表示されたと思います。
/*
* 定数
*/
var SCREEN_WIDTH = 320;
var SCREEN_HEIGHT= 320;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");
// element インスタンス生成
var element = tm.dom.Element("#world");
// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 背景を白でクリア
canvas.clearColor("white");
// ライン幅指定
canvas.setLineStyle(8, "round", "round", 10);
// ポインタ位置
var pointX = null, pointY = null;
// タッチ開始
element.event.pointstart(function(e) {
pointX = e.pointX;
pointY = e.pointY;
});
// タッチ移動
element.event.pointmove(function(e) {
if (pointX == null || pointY == null) return ;
canvas.drawLine(pointX, pointY, e.pointX, e.pointY);
pointX = e.pointX;
pointY = e.pointY;
e.stop();
});
// タッチ終了
element.event.pointend(function(e) {
pointX = null;
pointY = null;
e.stop();
});
// ボタンに処理を登録
tm.dom.Element("#clear").event.click(function() {
canvas.clearColor("white");
});
tm.dom.Element("#save").event.click(function(tm.graphics.Canvas.MIME_TYPE_JPG) {
canvas.saveAsImage();
});
});
拡張子の指定を変えるだけなのでその98と説明自体は変わりません。
「 tm.graphics.Canvas.MIME_TYPE_JPG 」と指定し、デジカメの写真等でよく見かける拡張子の「 JPG 」で出力できます。
分解3以外はその98と同じですので覚えている方は読み飛ばして下さい。
分解1 「tm.graphics.Canvas」
単純にわかりやすく表現すると以下のようになります。
「 graphicsクラスのCanvasを利用する 」
後ろにまだ続くので文章のように言い切った形ではありませんが、イメージしやすいかと思います。
さらに言うならばプログラムには初めから設定されている命令群がたくさんありその中の「 graphics 」というカテゴリにある「 canvas 」を使うということになります。
※イメージしやすい表現を使っていますので正確な意味を示していないこともありますのでご了承くださいませ。
分解2 「.MIME_TYPE」
HTMLを勉強し始めた頃の癖で未だに「 ミメ タイプ 」と咄嗟に読んでしまいます。
正確な読みは「 マイム タイプ 」です。
「 MIME TYPE 」を単独で分解1と同じように表現するならば「 カテゴリ 」を示すとイメージしてください。
たとえば前回出てきた「 PNG 」という拡張子は「 IMAGE (画像) 」のカテゴリ(MIME TYPE)に含まれます。
「 GIF 」という拡張子も画像の拡張子ですので「 IMAGE 」のカテゴリといった感じです。
ちなみに「 HTML 」の拡張子は「 TEXT 」に分けられます。
HTML5ではこのMIME_TYPEも含めて拡張子を指定しないといけないのですが、そこはtmlib.js が補完してくれるので難しく考える必要はありません。
おまじないだと思ってこのまま記述してください。
分解3 「_JPG」
分解1と2は意味がわかるよう説明してみましたが、変更する部分はありません。
最後の拡張子を指定する部分だけ変えればOKです。
冒頭でもちょっと言いましたが、この「 JPG 」という拡張子は写真やイラストにも使われるので身近な拡張子と言えるかも知れませんね。
ちなみにこの拡張子としての「 JPG 」は「 JPEG 」とも表記されますが同じものです。
余談ですが最近は「 htm 」のサイトはあまり見かけない気がします。
今回でサンプルは一応全部解説したことになりますが100個目があったと思ったんですが1個足りないようですので最後の100個目は公開されているサンプルを解説してみたいと思います。
