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

Canvas - Get pixel color in multiple canvas superimpose

本文关键字：叠加 获取 颜色 像素 布叠加 画布      更新时间：2024-06-11

我的页面上有多个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>

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

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

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);
相关文章：