「tmlib.js 怒濤の 100 サンプル!!」を試す その30

その30。

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.fillStyle = "red";
canvas.fillRect(100, 100, 300, 200);
});

今回勉強するのは16~17行目です。「 fillStyle() 」で色を指定し、「fillRect() 」で矩形を描画しています。
「fillRect() 」に関してはその9で勉強したので省略します。
「 fillStyle() 」に色を指定する方法として、色の名前を指定する方法と、RGBを256段階で指定する方法と、HTML等で使われるRGBを16進数で指定する方法があります。

canvas.fillStyle = "red";
canvas.fillStyle = "#FF0000";
canvas.fillStyle = "rgb(255,0,0)";

全て赤を指定する方法です。
プログラムの処理に合わせて使いやすいのを選ぶといいかと思います。

色を指定するメソッドとしてその2で勉強した「 clearColor() 」がありましたね。
では何がどう違うのかということですが、どちらも「 canvas 」に対して色を変えるよう指示しています。
ここまでは同じですが、「 clearColor() 」はcanvasそのものの背景に対して指示を出しています。
「 fillStyle() 」はcanvasに描画されるものに対して指示を出しています。
背景を黒、描画されるものには白を指定したサンプルを作ってみましたので参考にしてください。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です