例1の説明
関数A1のソースリスト
function 関数A1() {
var canvas = document.getElementById("キャンバス1"); // ★A
var ctx = canvas.getContext("2d");
// 初期クリア
ctx.clearRect(0, 0, 299, 149);
document.getElementById("結果表示場所").innerHTML ="";
// 画像の作成
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 149);
ctx.lineTo(199, 149);
ctx.closePath();
ctx.fillStyle = "rgba(255,0,0,0.7)";
ctx.fill();
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(199, 0);
ctx.lineTo(199, 149);
ctx.closePath();
ctx.fillStyle = "rgba(0,0,255,0.7)";
ctx.fill();
}
- ★Aの「キャンバス1」はHTMLで定義しています。
- 「初期クリア」は例1⇔例2の残留結果を消すためだけの操作です。
- 「画像の作成」はcanvasに簡単な画像を描くだけのものです。
関数B1のソースリスト
function 関数B1() {
var canvas = document.getElementById("キャンバス1"); // ★B
var ctx = canvas.getContext('2d');
canvas.onclick = function(e) { // クリックしたときの処理
// ===== クリック点の座標
var rect = e.target.getBoundingClientRect(); // ★C
var mouseX = e.clientX - Math.floor(rect.left); // ★D
var mouseY = e.clientY - Math.floor(rect.top);
// ==== RGBAの取得
var imagedata = ctx.getImageData(mouseX, mouseY, 1, 1); // ★E
var r = imagedata.data[0]; // ★F
var g = imagedata.data[1];
var b = imagedata.data[2];
var a = (imagedata.data[3]/255).toFixed(1); // ★G
// rgbaの透明度は 0~1 で表示するため
var rgba = "rgba(" + r + "," + g + "," + b +"," + a +")";
// 表示場所への表示
document.getElementById("結果表示場所").innerHTML
= "x=" + mouseX + ", y=" + mouseY + ", rgba=" + rgba;
}
}
- ★B:関数Aで canvas に描いた情報をそのまま引き継ぎます。すなわち、関数Aと関数Bがcanvas を仲介にして情報を共有していることになります、
- ★Cと★D:われわれが欲しいのは、「canvas上のマウス座標」です。ところが、クリックした点であるe.clientX,Yは、「window上のマウス座標」で、canvasの位置とは無関係な値です。それで、window画面におけるcanvas の左上端の微小長方形の座標を得るのがrectです。
すなわち、★Dは「canvas上のマウス座標 = window上のマウス座標 – canvasの左上の座標」を求めてmouseX,Y にしているのです。
- ★Eと★F:クリックした点の1ピクセル正方形の色データです。r,g,b,a が各1バイトで構成され、0~255の強度で表現されています。
- ★G:どころがrgbaの表記では、透過率aは0~1で表示することになっています。ここでは小数点以下1桁にしています。
例2の説明
関数A2のソースリスト
function 関数A2() {
var canvas = document.getElementById("キャンバス1");
var ctx = canvas.getContext("2d");
// 初期クリア
ctx.clearRect(0, 0, 299, 149);
document.getElementById("結果表示場所").innerHTML ="";
// 画像の作成
:
:
// 関数Bの呼出し
関数B2("キャンバス1");
}
- 関数A1に赤の部分を追加しただけです。「 画像の作成」の前に挿入しても同じです。
これにより、"キャンバス1"を引数として、関数Bを呼び出します。
関数B2のソースリスト
function 関数B2(キャンバス名) {
var canvas = document.getElementById(キャンバス名);
var ctx = canvas.getContext('2d');
:
: 以降、関数B1と同じ
:
}
関数Bの結果を変数で受け取ることに失敗
私としては、関数Bの結果を引数として関数Aに戻したいのです。そうすれば、クリックによりcanvasを動的に変化させることができます。
この機能はゲームでは基本的なものであり、解説も多いのですが、理解できていません。
関数Bでの
// 表示場所への表示
document.getElementById("結果表示場所").innerHTML
= "x=" + mouseX + ", y=" + mouseY + ", rgba=" + rgba;
の部分を、
return [ x, y, rgba ];
として、関数Aで
var [ x, y, rgba ] = 関数B2("キャビネット1");
としたのではエラーになります。おそらく return がイベントループ内にあるのが原因だと思うのですが・・・。