その96。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「図形(上級)」の「描画されている内容をDataURL Scheme に変換してみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
白い背景上に何か書き込み下のボタンをクリックすると警告テキストでやたら長いURLが表示されたと思います。
/*
* 定数
*/
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("#button").event.click(function() {
alert(canvas.canvas.toDataURL());
});
});
前回のその95で勉強した簡単なペイントツールの応用になります。
このサンプルは3つの構成要素で成り立っているようですので要素ごとに説明したいと思います。
要素1 「見出し」
処理に直接影響はないですがその95ではなかった新要素です。
とは言っても単なる見出しです。
HTML側で「 h1 」タグを使ってあるので大見出しということですね。
文字を変更したい場合はHTML側でどーぞ。
要素2 「ペイントツール」
その95で勉強した簡単なペイントツールそのものですね。
詳細は確認して頂くとして省略します。
要素3 「変換ボタン」
ここからがこのサンプルのメインです。
サンプルのタイトルにもあるように「 DataURL Scheme に変換 」と言われても何のことかわからないと思います。
まず「 DataURL 」とは何なのか？ということですが、わかりやすく言うならば画像をテキストに形を変えて保存し表示させたものということです。
ドラゴンボールで例えるならば悟空が大猿や超サイヤ人になり姿形は変わろうが悟空には変わらないのと似ています。
そして「 Scheme 」ですが、「 スキーム 」と読みます。
単語の意味としてはいくつかありますが今回は「 仕組み 」と訳すのがいいでしょう。
直訳すると「 画像をテキストにする仕組みに変換 」日本語としてはちょっと変ですが意味は通じるかなと。
まずボタンですが、これも見出しと同じでHTML側で表示させています。
<button id="button">DataURL Scheme</button>
そして47行目のマウスイベントとして「 button 」というIDが付いているボタンがクリックされたときに47～49行目の処理が行われます。
処理の内容としては、9行目で定義した変数「 canvas 」の中の「 canvas 」という要素を「 toDataURL() 」メソッドを使って「 DataURL 」へと変換させてそれを警告テキストとして表示させています。
警告テキストとはOKしか押せないポップアップウインドウのことです。
「 canvas 」が2つ続いてますので理解しづらいかもしれませんが変数としての「 canvas 」と図形等を描画するための要素としての「 canvas 」という同音異義語と認識したらいいかな思います。
通常はというと語弊があるかもしれませんが、変数名は出来るだけ他と区別が付きわかりやすいものを設定すると混乱せずに済みますよ。
変換の詳しい仕様等が知りたい方は「 base64 」でGoogle先生に聞いて頂けると助かります。
詳しい仕様を知らなくても変換は出来るから大丈夫！と今は思っていますので…
おそらく悟空も大猿に変身する身体の仕組みは知らなくても月を見れば変身できると知っているわけですしね。
