js给颜色范围随机颜色

最新推荐文章于 2024-07-25 09:24:40 发布

这个网名好记

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量321

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/m0_46188775/article/details/137594905

版权

给定范围随机颜色。有规律过度颜色

需求，由某个颜色过度到某个颜色。随机出现N个颜色

       function generateGradientColors(numColors,startColor='#001dff', endColor='#C1C4CB') {
            var start = hexToRgb(startColor);
            var end = hexToRgb(endColor);
            var colors = [];
            for (var i = 0; i < numColors; i++) {
                var r = Math.round(start.r + (end.r - start.r) * (i / (numColors - 1)));
                var g = Math.round(start.g + (end.g - start.g) * (i / (numColors - 1)));
                var b = Math.round(start.b + (end.b - start.b) * (i / (numColors - 1)));
                var color = rgbToHex(r, g, b);
                colors.push(color);
            }
            return colors;
        }
        function hexToRgb(hex) {
            var bigint = parseInt(hex.slice(1), 16);
            var r = (bigint >> 16) & 255;
            var g = (bigint >> 8) & 255;
            var b = bigint & 255;
            return { r, g, b };
        }
        function componentToHex(c) {
            var hex = c.toString(16);
            return hex.length == 1 ? "0" + hex : hex;
        }
        function rgbToHex(r, g, b) {
            return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
        }

        // generateGradientColors(随机的数量,开始随机的颜色范围，结束的颜色范围)
        console.log(generateGradientColors(7,))