JS 和 canvas 的 HSL 颜色逻辑

Question

我正在使用 spectrogram，它在我的 ctx 中运行良好。

与我使用的所有颜色一样 css filter: hue-rotate(160);

有人可以向我解释一下他是如何建议频谱图中的波形或能量图的颜色以及如何确定背景的吗？

我的意思是背景颜色和能量图的颜色？

我尝试随机更改值，但它似乎破坏了频谱图。显然我不明白颜色是如何产生的？我所能做的就是为 canvas.

使用通用过滤器

如果能控制背景颜色和能量图颜色就好了

JS line on Git

getFullColor(value) {
    var fromH = 62;
    var toH = 0;
    var percent = value / 255;
    var delta = percent * (toH - fromH);
    var hue = fromH + delta;
    return 'hsl(H, 100%, 50%)'.replace(/H/g, hue);
  }

谢谢 :)

编辑：从 js 添加了相关的颜色部分。

Answer 1

HSL 颜色模型使用三个组成部分来构成颜色 - 色调、饱和度和亮度。在代码中饱和度被硬编码为 100%，这意味着颜色将最饱和；当您减小该值时，它将更多地过渡到灰度。亮度调节灰度值（从黑到白），50%设置正好在全黑和全白之间。色调代表“颜色”本身，即红色、蓝色、紫色等。通过对一种颜色应用不同的饱和度和亮度，我们可以创建它的不同版本（深红色、浅红色等）。

HSL 模型可以可视化为一个圆柱体，其中亮度映射到它的高度，饱和度映射到半径，颜色（或色调）分布在 0 到 360 度的圆周上。

要选择一种颜色，您需要一个从 0 到 360 的值。颜色的顺序是明确定义的。在 0 度时是纯红色，随着您增加值并绕着圆圈转，您会得到橙色、黄色、绿色等。 360 度你又变红了。

最后，回到代码，色调是唯一被计算的东西，它将定义最终的颜色。库作者定义了两个变量 fromH = 62 和 toH = 0，这基本上告诉了色相圈的哪个扇区将成为最终颜色的来源。

然后库作者将频率值（0-255）转换为0到62之间的色调值。较低的频率值将导致色调值接近62度（黄橙色），较高的频率值将是closer to hue value of 0 (closer to the pure red).

if (value == 0)   hue = 62;
if (value == 100) hue = 37.6;
if (value == 255) hue = 0;

如果你想改变绘图的颜色（色调），你应该调整变量 fromH 和 toH 来选择你想要的颜色范围的圆扇区。

^{图片归功于 https://science.wikia.org/ru/wiki/HSL_%D0%B8_HSV_(%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D1%8B%D0%B5_%D0%BC%D0%BE%D0%B4%D0%B5%D0%BB%D0%B8)。}

更新:

可以修改原始函数以允许更改饱和度和亮度的范围。您在 HSL 中针对 #2a2c2d 的背景是 hls(200°, 3%, 17%)。如果您想以颜色为基础，可以尝试调整饱和度和亮度范围。

getFullColor: function(value) {
  var fromH = 200;
  var toH = 200;

  var fromS = 10;
  var toS = 50;

  var fromL = 20;
  var toL = 50;

  var percent = value / 255;

  var hue = fromH + percent * (toH - fromH);
  var saturation = fromS + percent * (toS - fromS);
  var lightness = fromL + percent * (toL - fromL);

  return 'hsl(H, S%, L%)'
    .replace(/H/, hue)
    .replace(/S/, saturation)
    .replace(/L/, lightness);
}

您可以 google 您的颜色“#2a2c2d”，您会看到一个 google 搜索颜色选择器。它还显示 HSL 值。通过移动颜色选择器，您可以找到您想要的最大值颜色并查看它的 HLS 值。

基本上“#2a2c2d”是您的背景颜色，它由 fromXXX 个变量组成。剩下的就是为最大频率值找到最亮的颜色，它的组件应该设置为 toXXX 变量。该功能将使您在两种颜色之间平滑过渡。

JS 和 canvas 的 HSL 颜色逻辑

HSL colour logic for JS and canvas

javascript

css

html5-canvas

web-audio-api