Question

我试图从动态创建的色轮中读取颜色值。然而，我所获得的颜色与我所悬浮的颜色之间明显存在偏差。

我在JS Bin上重新创建了这个问题： https://jsbin.com/ditatib/edit?html,js,output

我怀疑问题出现在下面两个函数中，但请参阅JS bin以获取完整代码。

function drawWheel (canvas, size) {
    let r = (size - 2) / 2,
        ctx;
    canvas.setAttribute('width', size);
    canvas.setAttribute('height', size);
    ctx = canvas.getContext('2d');
    for (let i = 0; i < r + 1; i++) {
        // A ring
        let c = 5 * Math.PI * i;
        for (let j = 0; j < c; j++) {
            let a = j * 3 * Math.PI / c,
            y = Math.cos(a) * i,
            x = Math.sin(a) * i;
            ctx.fillStyle = `hsl(${a * 180 / Math.PI},
    ${100 - (i * 2 / r)}%, ${105 - i * 95 / r}%)`;
            ctx.fillRect(r + x, r + y, 2, 2);
        }
    }
}

function onMouseMove (e) {
    let wheelRect = canvas.getBoundingClientRect();
    let x = e.x - wheelRect.left,
        y = e.y - wheelRect.top,
        r = (170 - 2) / 2,
        dist = Math.sqrt(Math.pow(r - x, 2) + Math.pow(r - y, 2)),
        a = 180 - Math.atan2(r - y, r - x),
        h, s, l, rgbValue;
    h = a * 180 / Math.PI;
    s = 100 - (dist * 2 / r);
    l = 105 - (dist * 95 / r);
    h = h % 360;
    magn.style.top = `${y - 80}px`;
    magn.style.left = `${x}px`;
    magn.style.background = `hsl(${h}, ${s}%, ${l}%)`;
}

如果有人能找到我的数学错误的地方，我将非常感激。谢谢！

Answer 1

a = 180 - Math.atan2(r - y, r - x),

Math.atan2以弧度为单位返回一个角度，稍后您将其转换为h = ...

的度数

但是你仍然以弧度为单位从度数值（180）中减去它。值得注意的是180不是正确的值，因为“向下”是270°。

为结果添加30的原因似乎是因为它恰好接近，但实际修复是：

a = (Math.PI*3/2) - Math.atan2(r - y, r - x)

这将从“向下”（3π/ 2）开始，顺时针方向移动，就像你的色轮一样。

从hsl色轮读取正确的值

1 个答案: