JS黄金分割法实现随机漂亮颜色!

您所在的位置:网站首页 图南鲸微博名 JS黄金分割法实现随机漂亮颜色!

JS黄金分割法实现随机漂亮颜色!

2023-09-04 07:24| 来源: 网络整理| 查看: 265

最近在做一个游戏需要随机生成颜色,用最原始的方法效果是这样的:

var bgColor = 'rgb('+Math.random()*255+','+Math.random()*255+','+Math.random()*255+')'

在这里插入图片描述 如果用这样一些颜色在你的游戏里就可以毁了你的游戏,颜色太土了! 然后查询了各种资料后发现可以用黄金分割法来解决这个问题,原理参考这篇文章:如何生成随机的颜色,我就不搬了。实现后效果如下: 在这里插入图片描述 直接上代码吧!完整代码如下:

var color = { colorArr:[], hsvtorgb:function (h, s, v) {//hsv转rgb var h_i = parseInt(h * 6); var f = h * 6 - h_i; var p = v * (1 - s); var q = v * (1 - f * s); var t = v * (1 - (1 - f) * s); var r, g, b; switch (h_i) { case 0: r = v; g = t; b = p; break; case 1: r = q; g = v; b = p; break; case 2: r = p; g = v; b = t; break; case 3 : r = p; g = q; b = v; break; case 4: r = t; g = p; b = v; break; case 5: r = v; g = p; b = q; break; default: r = 1; g = 1; b = 1; } return 'rgb('+parseInt(r*255)+','+parseInt(g*255)+','+parseInt(b*255)+')' }, setColorArr:function(){//h和s值固定,随机生成v this.colorArr = new Array; var golden_ratio = 0.618033988749895; var s = 0.5; var v = 0.999; for(var i=0;i


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3