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

最新推荐文章于 2024-06-06 15:28:56 发布

payyouyont

最新推荐文章于 2024-06-06 15:28:56 发布

阅读量2.2k

点赞数 1

分类专栏： javaScript 文章标签： javaScript JS 随机颜色黄金分割法

本文链接：https://blog.csdn.net/pei19890521/article/details/88063648

版权

javaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        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<10;i++){
                    var h = golden_ratio + Math.seededRandom(-0.5,0.3);
                    var color = this.hsvtorgb(h,s,v);
                    this.colorArr.push(color)
                }
            }
        }
        Math.seed = -1;
        //var s = Math.seed;
        Math.seededRandom = function(max, min) {//伪随机数（关于伪随机数的运用可以百度下，挺有意思的）
            max = max || 1;
            min = min || 0;
            Math.seed = (Math.seed * 9301 + 49297) % 233280;
            var rnd = Math.seed / 233280.0;
            return min + rnd * (max - min);
        };
        window.onload = function(){
            refreshColor();
        };
        function refreshColor() {//刷新颜色
            var main =  document.getElementById('main');
            removeChildren(main);
            color.setColorArr();
            for(var i=0;i<color.colorArr.length;i++){
                var bgColor  = color.colorArr[i];
                //var bgColor  = 'rgb('+Math.random()*255+','+Math.random()*255+','+Math.random()*255+')'
                var divHTML = '<div class="colorDiv" style="background-color:'+bgColor+'"></div>';
                var div = document.createElement('div');
                div.innerHTML = divHTML;
                main.appendChild(div);
            }
        }
        function changeColor(input) {
            Math.seed = input.value;
            refreshColor();
        }
        function removeChildren(_element){
            var _elementChild = _element.firstChild;
            while(_elementChild){
                _element.removeChild(_elementChild);
                _elementChild = _element.firstChild;
            }
        }
    </script>
    <title>Title</title>
    <style>
       .colorDiv{
           width: 20px;
           height: 50px;
           float: left;
       }
    </style>
</head>
<body>
    <div style=" width: 250px;height: 50px;" id="main">
    </div>
    <input type="number" onclick="changeColor(this)" onkeydown="changeColor(this)"/>
</body>
</html>

直接复制所有内容到html文件中就可以看到效果了，以上代码仅供参考，如有疑问欢迎大家留言讨论！
上一篇：java自定义Gson生成json字符串的顺序