使用黄金比例与HSV颜色模型生成随机RGB颜色

最新推荐文章于 2024-02-18 13:30:23 发布

ZTao-z

最新推荐文章于 2024-02-18 13:30:23 发布

阅读量808

点赞数

分类专栏：前端文章标签： javascript 黄金比例 hsv

本文链接：https://blog.csdn.net/think_A_lot/article/details/115959752

版权

前端专栏收录该内容

60 篇文章 2 订阅

订阅专栏

这篇博客介绍了如何使用JavaScript实现一个基于黄金比例的随机颜色生成器。通过定义静态变量和方法，代码能够将HSV颜色模型转换为RGB，并生成具有视觉吸引力的颜色。示例代码展示了如何调用这个颜色生成器。

摘要由CSDN通过智能技术生成

JavaScript代码实现

class ColorGenerator {
  static GOLDEN_RATIO_CONJUGATE: number = 0.618033988749895
  static colorSeed = Math.random()

  static hsv_to_rgb(h: number, s: number, v: number) {
    let h_i = Math.floor(h * 6);
    let f = h * 6 - h_i;
    let p = v * (1 - s);
    let q = v * (1 - f * s);
    let t = v * (1 - (1 - f) * s);
    let r = 0;
    let g = 0;
    let b = 0;
    if (h_i == 0) {
      [r, g, b] = [v, t, p];
    } else if (h_i == 1) {
      [r, g, b] = [q, v, p];
    } else if (h_i == 2) {
      [r, g, b] = [p, v, t];
    } else if (h_i == 3) {
      [r, g, b] = [p, q, v];
    } else if (h_i == 4) {
      [r, g, b] = [t, p, v];
    } else if (h_i == 5) {
      [r, g, b] = [v, p, q];
    }
    return `#${
      Math.floor(r * 256).toString(16)
    }${
      Math.floor(g * 256).toString(16)
    }${
      Math.floor(b * 256).toString(16)
    }`;
  }

  // 随机生成颜色
  static genGolor() {
    ColorGenerator.colorSeed += ColorGenerator.GOLDEN_RATIO_CONJUGATE;
    ColorGenerator.colorSeed %= 1;
    return ColorGenerator.hsv_to_rgb(ColorGenerator.colorSeed, 0.5, 0.95)
  }
}

// usage
ColorGenerator.genGolor()