Circle - Canvas获得lineWidth的像素颜色

我想获得lineWidth圆的像素颜色。我已经测试了很多解决方案，但从未返回Linewidth的颜色。Circle - Canvas获得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/

来源

2016-04-13 P. Frank

你不会找到的颜色，因为你正在寻找黑色的透明画布。这意味着所有的像素都是黑色的，只是你绘制的像素也有alpha值设置。尝试使用不同的颜色绘制您的圈子 – Blindman67

好的，非常完美，谢谢！ –

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

如果在鼠标不在圆上的情况下，如 console.log(JSON.stringify(p));那样在您的mousemove处理程序中打印值，则会看到如下所示的内容：{"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你的榜样

来源

2016-04-13 10:19:00 michaPau

谢谢你exaclty我想要的！ –

Circle - Canvas获得lineWidth的像素颜色

回答

相关问题