Question

我想获得<excludePackageNames>com.example</excludePackageNames>圈的像素颜色。我已经测试了很多解决方案，但从未返回lineWidth颜色。

下面我尝试了一个例子：

Linewidth

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=3;
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
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);
}



$('#myCanvas').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);
});

原始的jsfiddle我以方形颜色为例：http://jsfiddle.net/DV9Bw/1/

我尝试了另一个jsfiddle：http://jsfiddle.net/9SEMf/1727/

Answer 1

实际上你的代码没有任何问题。颜色十六进制值不变的原因是因为画布默认背景看起来是白色但实际上是黑色且带有0 alpha。

如果你在mousemove处理程序中打印值，就像 console.log(JSON.stringify(p));当鼠标悬停在圆圈上时，您会看到类似：{"0":0,"1":0,"2":0,"3":0}的内容。

注意alpha的第四个值。

在绘制圆圈之前，您可以用白色填充画布以查看差异。

//fill the entier canvas with opaque white
ctx.rect(0, 0, c.width, c.height);
ctx.fillStyle = "#FFFFFF";
ctx.fill();

jsfiddle与您的示例

Circle - Canvas获取lineWidth的像素颜色

1 个答案: