その31。
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.strokeStyle = "red";
canvas.strokeRect(100, 100, 300, 200);
});
今回勉強するのは16～17行目です。「 strokeStyle() 」で色を指定し、「 strokeRect() 」で矩形を描画しています。
その30で勉強した塗りつぶしスタイル指定と基本は変わりません。
指定するのが塗りつぶしか線のみかだけですね。
円や矩形で行った「 fill 」と「 stroke 」の使い分けを思い出しつつ触ってみて下さい。
