その76。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「ピクセル操作」の「ピクセルを設定しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
円上にマウスを持って行くと白いドットが描画されたと思います。

/*
* 定数
*/
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.onmousemove = function(e) {
bitmap.setPixelXY(e.pointX, e.pointY, 255, 255, 255);
canvas.drawBitmap(bitmap, 0, 0);
}

今回勉強するのは26～29行目になりますが順を追って説明します。

16行目

描画する図形の透明度を指定しています。
「0.5」ですので半透明になります。

18～23行目

3つの円の色をそれぞれ指示し描画を行なっています。
16行目で透明度指示していますので半透明で描画されることになります。

26行目

canvasに描画されているビットマップの情報を取得し、「 bitmap 」という変数に格納しています。
ビットマップの概念というかイメージは前回と同じものです。
1ピクセル単位の図形や画像の情報を扱うものという感じ。

27行目

この行も前回と同じで、イベントと言って「○○というアクションが起きたら□□しなさい」という風に何かを実行させるものになります。
このサンプルでは「canvasのelement上でマウスを動かしたら無名関数を実行しなさい」という風に理解します。
無名関数についてはコチラを参照ください。
特徴としては定義してすぐ使えることと、1回しか使わないなら呼び出すより楽チンといったところですかね。

28行目

27行目のイベントが発生した時のみ実行させる行です。
「 setPixelXY( x, y, r, g, b ) 」でxとyで指定した座標にrgbで指示した色をセット(着色前の準備)します。
色をセットする内容ですが、パラメータで「 (e.pointX, e.pointY, 255, 255, 255) 」となっていますね。
「 e.pointX 」は、マウスを動かした時のX座標です。
「 e.pointY 」は、マウスを動かした時のY座標です。
「 255 」は順番にRGB(赤緑青)の数値を指示しています。全色が最大数値ですので白色となります。
これでどこの座標に何色をセットするのか準備出来ました。

29行目

28行目で準備したものをここで描画しています。
「 drawBitmap( bitmap, x, y ) 」でビットマップを描画するメソッドになります。
「 bitmap 」という変数には描画する座標も準備しているのにここでは更に座標を指示するパラメータがありますね。
このパラメータは「 canvas.drawBitmap() 」からもわかるように「 canvas 」に対しての指示になります。
「 bitmap 」は26行目で定義したように「 canvas 」の影響下にありますので値を指示すれば座標が変わります。
ですのでサンプルでは位置が変わらないように「 0 」を指示しています。
何がどう違うのかは実際に触って見ることをオススメします。
X座標だけ50とか指示するとわかりやすいかと思います。

Tweet