Question

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

请参阅下面的示例。

在这个例子中，我想获得所有红色canvas边框的像素颜色，但由于画布是叠加的，它只返回第一个。

我尝试使用相同的z-index但没有成功。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

var c1 = document.getElementById("myCanvas-1");
var c2 = document.getElementById("myCanvas-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);

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

1 个答案: