javascript - 在一定范围内使用 paper.js 进行颜色转换

Question

我有一个问题，想了一天之后需要一个解决方案。我想生成一个 Canvas ，通过使用范围来改变颜色。听起来很简单。

颜色采用 (HSB)。有6种颜色。

1. 蓝色(230，S，B)
2. 绿色(130、S、B)
3. 黄色(55、S、B)
4. 橙色(40、S、B)
5. 红色(0(或 360)、S、B)
6. 紫罗兰 (315, S,B)

饱和度和亮度无关紧要(可以始终相同)。

颜色必须在此范围内改变

1. 蓝色 0 - 2.9 绿色
2. 绿色 3 - 5.9 黄色
3. 黄色 6 - 8.9 橙色
4. 橙色 9 - 11.9 红色
5. 红色 12 - 14.9 紫罗兰色

所以如果我得到一些像这样的数据

var sample Data = new Array(0.1,0.2,0.3,0.4,3.4,5.9,9.3,9.4,9.5,9.6,...);

Canvas 必须缓慢地从蓝色到绿色改变色调，然后应该有一个“颜色剪切”，因为从 0.4 到 3.4(绿色和黄色之间的某个值)的“大跳跃”。

我正在寻找这个问题背后的“逻辑”。我已经有了带 Canvas 的 HTML。对于 Canvas 和颜色，我使用 Paper.js

希望有人理解我的问题!

谢谢

Answer 1

我不了解Paper.js，所以我无法帮助获取 Canvas 上的颜色，但我可以帮助将数据转换为颜色。由于您的五个色调范围大小不同，我们必须对每个色调范围进行单独计算。

var sampleColors = [],
    l = sampleData.length,
    s = '50%',
    b = '50%';
function getColor(d) {
    var c, m = d % 3;
    if (d < 3) c = 230 - m * 33.333;
    else if (d < 6) c = 130 - m * 25;
    else if (d < 9) c = 55 - m * 5;
    else if (d < 12) c = 40 - m * 13.333;
    else c = 360 - m * 15;
    return 'hsb(' + Math.round(c) + 'deg,' + s + ',' + b + ')';
}

for(var i = 0; i < l; i++) {
    sampleColors.push(getColor(sampleData[i]));
}

现在 sampleColors 包含属于 sampleData 中项目的 hsb 颜色字符串。

sampleData[0] == 0.1;    sampleColor[0] == 'hsb(227deg,50%,50%)';
sampleData[4] == 3.4;    sampleColor[4] == 'hsb(120deg,50%,50%)';

如果颜色符号不符合您的需求，请发表评论。