「tmlib.js 怒濤の 100 サンプル!!」を試す その91

その91。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「図形(上級)」の「クマを描画してみようう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
可愛いクマが描画されたと思います。

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
var SHAPE_RADIUS = 128;

tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 黒でクリア
canvas.clearColor("black");

// 座標を中心に移動
canvas.setTransformCenter();

// ear
canvas.fillStyle = "hsl(40, 50%, 50%)";
canvas.fillCircle(-80, -80, 40);
canvas.fillCircle(+80, -80, 40);
canvas.fillStyle = "hsl(40, 95%, 80%)";
canvas.fillCircle(-80, -80, 25);
canvas.fillCircle(+80, -80, 25);

// face
canvas.fillStyle = "hsl(40, 50%, 50%)";
canvas.fillCircle(0, 0, 100);

// eye
canvas.fillStyle = "black";
canvas.fillCircle(-50, -10, 10);
canvas.fillCircle(+50, -10, 10);

// mouth
canvas.fillStyle = "white";
canvas.save();
canvas.scale(1.25, 1);
canvas.fillCircle(0, 50, 45);
canvas.restore();
canvas.fillStyle = "black";
canvas.fillCircle(0, 30, 15);
canvas.strokeStyle = "black";
canvas.strokeArc(-15, 40, 15, 0, Math.PI, false);
canvas.strokeArc(+15, 40, 15, 0, Math.PI, false);
});

初期設定

17行目で背景色を黒にし、20行目でこれから描画するオブジェクトが中心にくるように指示しています。
6行目の定数は使われていないようですのでスルーしてください。

耳の描画は外側の濃い色の部分と内側の薄い色の部分に別れています。
まずは外側から描画します。
23行目で外側の色を設定しています。もちろんRGBで指定しても構いません。
24行目で外側の左耳を「 X座標 -80 」「 Y座標 -80 」「 半径 40 」で、
25行目で外側の右耳を「 X座標 +80 」「 Y座標 -80 」「 半径 40 」で描画しています。
座標については中心からの距離になります。20行目の設定が効いてますね。
X座標だけがそれぞれ中心から正反対の方向に指示されているので鏡に写ったような状態で描画されますね。

続いて内側のです。
26行目で内側の色に変更し、
27行目で内側の左耳を描画、
28行目で内側の右耳を描画しています。
色と半径変えて同じ座標に描画しているのがわかりますね。
ただ後から描画されたものが重なり順が上になりますので内側の耳が視認できる状態で描画されています。
内側の耳から先に描画すると視認できませんので注意して下さい。

こちらも耳と同じようなイメージです。
31行目で色を外側の耳と同じに変更し、
32行目で「 X座標 0 」「 Y座標 0 」「 半径 100 」で描画しています。
XとYの座標が「 0 」ということは中心ということになります。
顔なので耳よりも大きい半径を指示しています。
さらに耳より後に描画していますので重なり順が上になり内側の耳が一部重なっています。
外側の耳とは色が同じなのでわかりづらいですが顔のほうが上になります。

35行目で眼の色を「 “black” 」と指示しています。
tmlib.jsに限らず代表的な原色は色名を英語で指示することが出来るものが多いので覚えておくと便利です。
その際は「 “” 」(ダブルクォーテーション)記号で囲って下さい。36行目で左目を「 X座標 -50 」「 Y座標 -10 」「 半径 10 」で描画し、
37行目で右目を「 X座標 +50 」「 Y座標 -10 」「 半径 10 」で描画しています。
耳の時と同じような感じですね。
重なり順は顔より上になります。

まずは口の周りの白い部分から。
40行目で口の周りの色である「 “white” 」を指示しています。
41行目で現在の状態を保存しています。
42行目で以降に描画されるオブジェクトの大きさをX方向に「 1.25 」倍、Y方向に「 1 」倍になるよう指示しています。
1倍 」とは大きさを変更していない状態のことを指します。プログラムとしては1倍から1倍の大きさに処理をしていますがややこしくなるので省きます。
43行目で「 X座標 0 」「 Y座標 50 」「 半径 45 」の円を描画していますが、42行目でX方向だけ1.25倍になるよう指示していますので横長い楕円が描画されることになります。
44行目は41行目で保存していた状態へと戻しています。
これは何のためかというと42行目で変更した状態を41行目の変更していない状態に戻るためです。
scaleメソッドで何もしていない状態だと言った「 1 」を指示すればいいのでは?と思う方もいるかもしれませんが、そうはいかないのです。
1.25倍した楕円はその1.25倍した状態を「 1 」と認識するのでサンプルのように保存した状態に戻す必要があるのです。
戻し忘れると以降に描画されるオブジェクトは全部X方向に1.25倍された状態で描画されることになります。

次に鼻です。
45行目で鼻の色を「 “black” 」と指示しています。
46行目で鼻を「 X座標 0 」「 Y座標 +30 」「 半径 15 」で描画しています。

最後に口です。
47行目で口の色を「 “black” 」と指示しています。
今までは塗りつぶしの色を変更していましたが今回はストロークの色を変更しています。
48行目で左側の口を、
49行目で右側の口を描画しています。
パラメータで「 円の中心座標 」「 半径 」「 開始地点(A地点) 」「 終了地点(B地点) 」「 円の描画方向 」を指示しています。
その13その14で勉強した内容ですのでどの数値がどれにあたるのか復習も兼ねて確認してみて下さい。

最終的な重なり順としては下になるものから
耳 → 顔 → 目 → 口の白い部分 → 鼻 → 口
となります。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です