その13になります。

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

今回試すサンプルは「図形-初級(Figure)」の「円弧を描画しよう(塗りつぶし描画)」です。
ちょっと難しいかもしれません。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
右上が欠けた円弧が描画されたと思います。

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

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

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();

// 円弧を塗りつぶし描画
canvas.fillArc(200, 200, 150, 0, 225*Math.PI/180, false);
});

今回勉強するところは20行目です。 「変数canvas」に対して「.fillArc() 」というメソッドで円弧を描画しています。
strokeCircle( 円の中心X座標, 　円の中心Y座標, 　円の半径,　 A地点の角度, 　B地点の角度, 　角度の正負)という順番に値を指定します。
数学にあまり詳しくないので詳細に説明は出来ませんが、おそらく円弧法を用いて計算されていると思います。
ですので角度は45度や90度（単位 deg）といった度数法ではなく、0ラジアンといった弧度法（単位 rad）を使います。
円弧法については「こちら」がわかりやすいかな？

原点として円の中心から右側に一番遠い場所が「0 rad」と設定されていますので、A地点の角度とは原点から角度を指しています。
B地点の角度に「225*Math.PI/180」ついてはちょっと面倒なんですが、「225」は度数法での角度です。
度数法の角度に円周率を180で割ったものを乗算すると弧度法に変換することができます。
色々面倒ですので「 *Math.PI/180 」は、度数法から弧度法に変換する公式だと覚えて下さい。
変換された角度は原点からの角度で計算されますので気をつけて下さい。

角度の正負ですが、ここには「 true 」または「 false 」という値を使います。
要するに角度をプラスの値にするかマイナスの値するかということです。
trueでプラスに、falseでマイナスになります。
原点からプラスの角度ですと半時計周りに、マイナスの角度ですと時計回りに進みます。 言葉で説明するのがこんなに難しいなんて…
頑張って図表してみました。

自分の中でも7割理解といったところでしょうか。
間違っていたら教えて下さい。

Tweet