Circle-Canvas获取lineWidth的像素颜色

Circle - Canvas get pixel color of lineWidth

本文关键字：像素 颜色 lineWidth 获取 Circle-Canvas      更新时间：2024-06-07

我想获得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/

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

如果您在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与您的示例

相关文章：