その75。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「ピクセル操作」の「ピクセルを取得しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
半透明の3つの円が重なりあって描画されたと思います。
/*
* 定数
*/
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.globalAlpha = 0.5;
// 円を描画
canvas.fillStyle = "rgb(255, 0, 0)";
canvas.fillCircle(230, 150, 100);
canvas.fillStyle = "rgb(0, 255, 0)";
canvas.fillCircle(180, 250, 100);
canvas.fillStyle = "rgb(0, 0, 255)";
canvas.fillCircle(280, 250, 100);
// クリックした箇所のピクセル値を表示
var bitmap = canvas.getBitmap();
canvas.element.onclick = function(e) {
var pixel = bitmap.getPixel(e.pointX, e.pointY);
alert(pixel.toString());
}
今回勉強するのは26～30行目になりますが順を追って説明します。
16行目
描画する図形の透明度を指定しています。
「0.5」ですので半透明になります。
18～23行目
3つの円の色をそれぞれ指示し描画を行なっています。
16行目で透明度指示していますので半透明で描画されることになります。
26行目
canvasに描画されているビットマップの情報を取得し、「 bitmap 」という変数に格納しています。
ビットマップとは簡単に言うならば1ピクセル単位の図形や画像の情報を扱うものという感じですかね。
まだちょっとわかりづらい気もしますがサンプルを最後まで読むと何となくわかるかと思います。
27行目
この行はイベントと言って「○○というアクションが起きたら□□しなさい」という風に何かを実行させるもになります。
RPGゲームでイベントが発生したなんていい方すると思います。
イメージとしてはあんな感じですね。
このサンプルでは「canvasのelementがクリックされたら無名関数を実行しなさい」という風に理解します。
僕もまだ未熟なのでもっとわかりやすい説明が出来たらいいのですが、そうするとJavascriptのことから説明しないと難しいのでこの100サンプル解説では割愛させて頂きます。
28行目
27行目のイベントが発生した時のみ実行させる行です。
26行目で取得したビットマップ情報の中からクリックした場所のピクセルを取得し、「 pixel 」とう変数に格納しています。
クリックした座標の情報はどこから取得したかと言えば27行目で「 function(e) 」の「 (e) 」に格納されています。
そうすると「 bitmap.getPixel(e.pointX, e.pointY) 」という意味がわかるのではないでしょうか。
29行目
この行も27行目でイベントが発生した時のみ実行されます。
「 alert() 」は最前面に小さいポップアップウインドウが表示されるメソッドです。
パラメータには「 pixel.toString() 」とあります。
これは28行目で取得したピクセル情報を「 toString() 」で文字列に変換しています。
文字列に変換しなくても表示はされますが、その際は数値として扱われます。
今はこのサンプルで文字列に変換していたなぁと覚えておくだけでいいかと思います。
詳しく知りたい方は「 データ型 」で検索してみて下さい。
