キャンバス - 複数のキャンバススーパーインポーズでピクセルカラーを取得

Question

私は自分のページに複数のcanvasを持っています。 canvasが2つ以上重なっている場合、すべてのピクセルの色をcanvasにしたいと思います。

下記の私の例をご覧ください。

この例では、すべての赤色のピクセルの色を取得したいと思いますが、キャンバスが重ねられているため、最初のピクセルが返されます。

私は同じz-indexを試してみましたが、成功しませんでした。

var c = document.getElementById("myCanvas-1"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.lineWidth=7; 
 
ctx.arc(100, 100, 50, 0, 2 * Math.PI); 
 
ctx.strokeStyle = '#ff0000'; 
 
ctx.stroke(); 
 

 
var c = document.getElementById("myCanvas-2"); 
 
var ctx = c.getContext("2d"); 
 
ctx.beginPath(); 
 
ctx.lineWidth=7; 
 
ctx.arc(100, 100, 50, 0, 2 * Math.PI); 
 
ctx.strokeStyle = '#ff0000'; 
 
ctx.stroke(); 
 

 
function findPos(obj) { 
 
    var curleft = 0, curtop = 0; 
 
    if (obj.offsetParent) { 
 
     do { 
 
      curleft += obj.offsetLeft; 
 
      curtop += obj.offsetTop; 
 
     } while (obj = obj.offsetParent); 
 
     return { x: curleft, y: curtop }; 
 
    } 
 
    return undefined; 
 
} 
 

 
function rgbToHex(r, g, b) { 
 
    if (r > 255 || g > 255 || b > 255) 
 
     throw "Invalid color component"; 
 
    return ((r << 16) | (g << 8) | b).toString(16); 
 
} 
 

 

 

 
$('.can').mousemove(function(e) { 
 
    var pos = findPos(this); 
 
    var x = e.pageX - pos.x; 
 
    var y = e.pageY - pos.y; 
 
    var coord = "x=" + x + ", y=" + y; 
 
    var c = this.getContext('2d'); 
 
    var p = c.getImageData(x, y, 1, 1).data; 
 
    var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); 
 
    $('#status').html(coord + "<br>" + hex + "<br>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas class="can" id="myCanvas-1" width="300" height="200" ></canvas> 
 
<canvas class="can" id="myCanvas-2" width="300" height="200" style="position:relative;left:-250px" ></canvas> 
 
<div id="status"></div>

Answer 1

あなたは、それぞれのキャンバスに同じ変数名を使用しています。

グローバルインスタンス名を2つだけ指定できます。

var c1 = document.getElementById("myCanvas-1"); 
var c2 = document.getElementById("myCanvas-2"); 

あなたのキャンバスを拡大することは、mousemoveリスナーを1つに追加する必要があるのと同じサイズです。

ハンドラー内の同じピクセル位置にある2つのピクセル情報を取得するよりも、

var ctx1 = c1.getContext('2d'); 
var ctx2 = c2.getContext('2d'); 
var p1 = ctx1.getImageData(x, y, 1, 1).data; 
var p2 = ctx2.getImageData(x, y, 1, 1).data; 
var hex1 = "#" + ("000000" + rgbToHex(p1[0], p1[1], p1[2])).slice(-6); 
var hex2 = "#" + ("000000" + rgbToHex(p2[0], p2[1], p2[2])).slice(-6);