javascript - Circle - Canvas 获取 lineWidth 的像素颜色

Question

我想获取 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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas  id="myCanvas" width="300" height="200" ></canvas>
<div id="status"></div>

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

我试过的另一个 jsfiddle:http://jsfiddle.net/9SEMf/1727/

Answer 1

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

如果您在 mousemove 处理程序中打印值，例如console.log(JSON.stringify(p)); 当鼠标不在圆圈上时，您会看到如下内容:{"0":0,"1":0, "2":0,"3":0}.

注意 alpha 的第四个值。

您可以在画圆之前用白色填充 Canvas 以查看差异。

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

jsfiddle以你的例子