その36。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「色, グラデーション(Color, Gradient)」の「塗りつぶしスタイルとストロークスタイルを一括で指定しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
黄色の円と青ストロークの円が描画されたと思います。
/*
* 定数
*/
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.setColorStyle("blue", "yellow");
// 四角形を描画
canvas.fillCircle(150, 150, 100);
canvas.strokeCircle(300, 300, 100);
};
今回勉強するのは16行目です。
その30とその31で勉強したストロークと塗りつぶしのスタイル設定を1行で行うものになります。
16行目
「 setColorStyle() 」で行いますが、
パラメータは順番に(ストロークのスタイル, 塗りつぶしのスタイル）と指定して下さい。
サンプルでは色の名前を指定していますが、「 rgb 」でも「 hsl 」でも指定可能ですので処理に合わせて使い分けて下さい。
19～20行目
ストローク、塗りつぶしスタイルが共に17行目設定されていますので、あとは普通に描画するだけで適用されます。
処理によっては個別に設定したほうが良い場合もありますのでプログラミングしながらどうしたらいいか考えながら行うといいかと思います。
僕自身未熟なのでいつも悩んでいますが…
