Question

我有一个问题，需要一整天思考后的解决方案。我想生成一个画布，通过使用范围来改变他的颜色。听起来很简单。

颜色在（HSB）。有6种颜色。

蓝色（230，S，B）
绿色（130，S，B）
黄色（55，S，B）
橙色（40，S，B）
红色（0（或360），S，B）
violette（315，S，B）

饱和度和亮度无关紧要（始终可以相同）。

颜色必须在此范围内变化

蓝色0 - 2.9绿色
绿色3 - 5.9黄色
黄色6 - 8.9橙色
橙色9 - 11.9红色
red 12 - 14.9 violette

所以，如果我得到这样的数据

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,...);

画布必须在慢速从蓝色到绿色之间改变色调，然后应该有一个＆＃34;颜色切割＆＃34;因为＆＃34;大跳＆＃34;从0.4到3.4（绿色和黄色之间的东西）。

我正在寻找＆＃34;逻辑＆＃34;这个问题背后。我已经有了带有画布的HTML。对于画布和颜色我使用Paper.js

希望有人理解我的问题！

感谢

Answer 1

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

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%)';

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

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

1 个答案: