その16になります。
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.strokeTriangle(200, 100, 100, 200, 300, 200);
});
今回勉強するところは17行目です。 「変数canvas」に対して「.strokeTriangle() 」というメソッドで三角形を描画しています。
前回のその15で描画した三角形と同じ要領で三点の頂点を指定すると線のみで描画してくれます。
strokeTriangle(AのX座標, AのY座標, BのX座標, BのY座標, CのX座標, CのY座標) ですね。
原点からの絶対位置で指定するということを忘れなければ楽勝ですっ。
