用梯度法求出色棒中特定位置的颜色值

Question

我生成了一个带有CSS3样式(小提琴)的渐变柱，现在我想要那个色条中特定位置的颜色值(x和y)。据我所知，没有直接的方法可以做到这一点。

我认为有两种选择：

1. 在JavaScript中实现梯度算法，并从零开始求值。这个算法对多种颜色有确切的定义吗？在每个浏览器中，渐变看起来都一样吗？
2. 使用canvas和createLinearGradient方法绘制渐变，并直接访问画布以获得颜色值。

还有其他选择吗？

Answer 1

我选择实现您的第一个解决方案(用JavaScript计算梯度)。这意味着您不需要依赖对canvas元素的支持，这取决于浏览器的支持可能很重要。

使用canvas方法也很酷，而且更容易。您可以从CSS中呈现颜色停止，然后使用getImageData()确定指针结束的颜色。

您可以用正则表达式提取CSS颜色，并将任何人类颜色映射到RGB。

var background = window.getComputedStyle(element).getPropertyValue("background");

var colorStops = [];
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g;
var match;

var humanToHex = {
    "red": [255, 0, 0],
    "green": [0, 128, 0],
    "blue": [0, 0, 255]
};

while (match = matchColorStops.exec(background)) {
    if (humanToHex[match[1]]) {
        match[1] = humanToHex[match[1]];
    }
    colorStops.push({
        percentage: match[2],
        color: match[1]
    });
}

如果将两种颜色分隔成RGB值，则可以使用这个小的JavaScript函数来插值它们。

var getStepColor = function(colorA, colorB, value) {
    return colorA.map(function(color, i) {
        return (color + value * (colorB[i] - color)) & 255;
    });
};

你可以把它组合起来得到一些代码让你这样做.

var getStepColor = function (colorA, colorB, value) {
    return colorA.map(function (color, i) {
        return (color + value * (colorB[i] - color)) & 255;
    });
};

var gradient = document.querySelector("#gradient");
var preview = document.querySelector("#preview");

var background = window.getComputedStyle(gradient).getPropertyValue("background");

var colorStops = [];
var matchColorStops = /,\s*(\w+)\s+(\d+)%/g;
var match;

var humanToHex = {
    "red": [255, 0, 0],
    "green": [0, 128, 0],
    "blue": [0, 0, 255]
};

while (match = matchColorStops.exec(background)) {
    // If colour is *human-readable*, then
    // substitute it for a RGB value.
    if (humanToHex[match[1]]) {
        match[1] = humanToHex[match[1]];
    }
    colorStops.push({
        percentage: match[2],
        color: match[1]
    });
}

gradient.addEventListener("mousemove", function (event) {

    var x = event.pageX - gradient.offsetTop;
    var y = event.pageY - gradient.offsetLeft;
    var percentage = (x / this.offsetWidth) * 100;

    var i;
    for (i = 0; i < colorStops.length; i++) {
        if (colorStops[i].percentage > percentage) {
            break;
        };
    }

    var lowerIndex = i == 1 ? 0 : i - 1;
    var upperIndex = lowerIndex + 1;
    var value = x / (gradient.offsetWidth / (colorStops.length - 1)) % 1;

    color = getStepColor(colorStops[lowerIndex].color, colorStops[upperIndex].color, value);

    preview.style.backgroundColor = "rgb(" + color.join() + ")";
    preview.textContent = preview.style.backgroundColor;

});

jsFiddle。

这只是一种简单的解决方法，可能有一种更简单的方法来提取颜色，并找出指针与哪个渐变段之间的关系。