Canvas - 在多个画布叠加中获取像素颜色

Question

我的页面上有多个canvas。当两个或多个canvas 叠加时，我想获得所有canvas 的像素颜色。

请看下面我的例子。

在这个例子中，我想获取所有红色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

您为每个画布使用相同的变量名称。

您可以只给它们两个不同的全局实例名称。

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

假设您的画布大小相同，您只需将 mousemove 侦听器添加到其中一个。

比从处理程序内部相同像素位置的两者获取像素信息。

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);