その15になります。
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.fillTriangle(200, 100, 100, 200, 300, 200); });
今回勉強するところは17行目です。 「変数canvas」に対して「.fillTriangle() 」というメソッドで三角形を描画しています。
基本的にはその8で行った直線を描画と変わりません。
直線は始点と終点を絶対位置で指定、三角形は各頂点の座標を絶対位置で指定するだけとなります。
fillTriangle(AのX座標, AのY座標, BのX座標, BのY座標, CのX座標, CのY座標) といった感じです。