Javascript颜色渐变
在有或没有Jquery的情况下使用javascript，我需要根据开始和结束的颜色创build一个渐变颜色。 这是可能的编程方式吗？
最终的颜色只会是开始颜色的深色阴影，并且是无序的列表，我无法控制li项目的数量。 我正在寻找一个解决scheme，允许我select一个开始和结束颜色，将hex值转换为RGB，因此可以在代码中操作。 开始的RGB值通过基于项目数计算的步长值增加。
所以如果列表有8个项目，那么它需要以8个步骤递增分开的红绿蓝值来实现最终的颜色。 有没有更好的方法来做到这一点，如果是的话，我在哪里可以find一些示例代码？
我创build了一个JS库， RainbowVis-JS来解决这个一般问题。 您只需使用setNumberRange设置项目的数量，并使用setNumberRange设置开始和结束颜色。 然后你用colourAt得到hex颜色代码。
var numberOfItems = 8; var rainbow = new Rainbow(); rainbow.setNumberRange(1, numberOfItems); rainbow.setSpectrum('red', 'black'); var s = ''; for (var i = 1; i <= numberOfItems; i++) { var hexColour = rainbow.colourAt(i); s += '#' + hexColour + ', '; } document.write(s); // gives: // #ff0000, #db0000, #b60000, #920000, #6d0000, #490000, #240000, #000000,
欢迎您来看图书馆的源代码。 🙂
正确的函数来生成颜色数组！
function hex (c) { var s = "0123456789abcdef"; var i = parseInt (c); if (i == 0 || isNaN (c)) return "00"; i = Math.round (Math.min (Math.max (0, i), 255)); return s.charAt ((i - i % 16) / 16) + s.charAt (i % 16); } /* Convert an RGB triplet to a hex string */ function convertToHex (rgb) { return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]); } /* Remove '#' in color hex string */ function trim (s) { return (s.charAt(0) == '#') ? s.substring(1, 7) : s } /* Convert a hex string to an RGB triplet */ function convertToRGB (hex) { var color = []; color[0] = parseInt ((trim(hex)).substring (0, 2), 16); color[1] = parseInt ((trim(hex)).substring (2, 4), 16); color[2] = parseInt ((trim(hex)).substring (4, 6), 16); return color; } function generateColor(colorStart,colorEnd,colorCount){ // The beginning of your gradient var start = convertToRGB (colorStart); // The end of your gradient var end = convertToRGB (colorEnd); // The number of colors to compute var len = colorCount; //Alpha blending amount var alpha = 0.0; var saida = []; for (i = 0; i < len; i++) { var c = []; alpha += (1.0/len); c[0] = start[0] * alpha + (1 - alpha) * end[0]; c[1] = start[1] * alpha + (1 - alpha) * end[1]; c[2] = start[2] * alpha + (1 - alpha) * end[2]; saida.push(convertToHex (c)); } return saida; } // Exemplo de como usar var tmp = generateColor('#000000','#ff0ff0',10); for (cor in tmp) { $('#result_show').append("<div style='padding:8px;color:#FFF;background-color:#"+tmp[cor]+"'>COLOR "+cor+"° - #"+tmp[cor]+"</div>") }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="result_show"></div>
是的，一点没错。
我在Java中这样做，在JavaScript中也应该相当简单。
首先，您需要将颜色分解为RGB组件。
然后计算组件的开始和结束之间的差异。
最后，计算百分比差异并乘以每个组件的起始颜色，然后将其添加到起始颜色。
假设你可以得到RGB值，这应该做到这一点：
var diffRed = endColor.red - startColor.red; var diffGreen = endColor.green - startColor.green; var diffBlue = endColor.blue - startColor.blue; diffRed = (diffRed * percentFade) + startColor.red; diffGreen = (diffGreen * percentFade) + startColor.green; diffBlue = (diffBlue * percentFade) + startColor.blue;
“percentFade”是浮点数，表示淡入“endColor”的距离。 1将会完全消失（从而创build最终颜色）。 0将不会退色（起始颜色）。
我使用这个基于@desau的函数回答：
getGradientColor = function(start_color, end_color, percent) { // strip the leading # if it's there start_color = start_color.replace(/^\s*#|\s*$/g, ''); end_color = end_color.replace(/^\s*#|\s*$/g, ''); // convert 3 char codes --> 6, eg `E0F` --> `EE00FF` if(start_color.length == 3){ start_color = start_color.replace(/(.)/g, '$1$1'); } if(end_color.length == 3){ end_color = end_color.replace(/(.)/g, '$1$1'); } // get colors var start_red = parseInt(start_color.substr(0, 2), 16), start_green = parseInt(start_color.substr(2, 2), 16), start_blue = parseInt(start_color.substr(4, 2), 16); var end_red = parseInt(end_color.substr(0, 2), 16), end_green = parseInt(end_color.substr(2, 2), 16), end_blue = parseInt(end_color.substr(4, 2), 16); // calculate new color var diff_red = end_red - start_red; var diff_green = end_green - start_green; var diff_blue = end_blue - start_blue; diff_red = ( (diff_red * percent) + start_red ).toString(16).split('.')[0]; diff_green = ( (diff_green * percent) + start_green ).toString(16).split('.')[0]; diff_blue = ( (diff_blue * percent) + start_blue ).toString(16).split('.')[0]; // ensure 2 digits by color if( diff_red.length == 1 ) diff_red = '0' + diff_red if( diff_green.length == 1 ) diff_green = '0' + diff_green if( diff_blue.length == 1 ) diff_blue = '0' + diff_blue return '#' + diff_red + diff_green + diff_blue; };
例：
getGradientColor('#FF0000', '#00FF00', 0.4); => "#996600"
不是这样强大的，但在大多数情况下工作，你不必包括除了jQuery以外的任何其他库下面的代码：
HTML：
<div id="colors"></div>
JavaScript的：
function rainbow(value, s, l, max, min, start, end) { value = ((value - min) * (start - end) / max)+end; return 'hsl(' + value + ','+s+'%,'+l+'%)'; } function createRainbowDiv(start,end){ var gradient = $("<div>").css({display:"flex", "flex-direction":"row",height:"100%"}); for (var i = start; ((i <= end) && (i >= start)) || ((i >= end) && (i <= start)); i += (end-start) / Math.abs(end-start)){ gradient.append($("<div>").css({float:"left","background-color":rainbow(i, 100,50, Math.max(start,end), Math.min(start,end), start,end),flex:1})); } return gradient; } $("#colors").append(createRainbowDiv(0,150)); $("#colors").css("width","100%").css("height","10px");
这应该使包含彩虹的div。 见http://jsfiddle.net/rootandy/54rV7/
我需要为一组未知的dynamic元素创build足够多的颜色选项，但是我需要每个元素都通过开始颜色和结束颜色来增加它们的方式。 这种方式遵循“百分比淡出”的方法，除了我有一个困难的时间遵循这个逻辑。 这是我如何使用两个rgb颜色值的input和计算页面上元素的数量。
这是一个链接到一个codepen ，展示了这个概念。
以下是该问题的代码片段。
<style> #test { width:200px; height:100px; border:solid 1px #000; } .test { width:49%; height:100px; border:solid 1px #000; display: inline-block; } </style> </head> <body> <div id="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div class="test"></div> <script> var GColor = function(r,g,b) { r = (typeof r === 'undefined')?0:r; g = (typeof g === 'undefined')?0:g; b = (typeof b === 'undefined')?0:b; return {r:r, g:g, b:b}; }; // increases each channel by the difference of the two // divided by 255 (the number of colors stored in the range array) // but only stores a whole number // This should respect any rgb combinations // for start and end colors var createColorRange = function(c1) { var colorList = [], tmpColor, rr = 0, gg = 0, bb = 0; for (var i=0; i<255; i++) { tmpColor = new GColor(); if (rExp >= 0) { tmpColor.r = Math.floor(c1.r - rr); rr += rAdditive; } else { tmpColor.r = Math.floor(c1.r + rr); rr += rAdditive; } if (gExp >= 0) { tmpColor.g = Math.floor(c1.g - gg); gg += gAdditive; } else { tmpColor.g = Math.floor(c1.g + gg); gg += gAdditive; } if (bExp >= 0) { tmpColor.b = Math.floor(c1.b - bb); bb += bAdditive; } else { tmpColor.b = Math.floor(c1.b + bb); bb += bAdditive; } console.log(tmpColor); colorList.push(tmpColor); } return colorList; }; /* ================== Testing Code Below ================== */ var firstColor = new GColor(255, 24, 0); var secondColor = new GColor(255, 182, 0); // Determine the difference var rExp = firstColor.r - secondColor.r; // Divide that difference by length of the array // you would like to create (255 in this case) var rAdditive = Math.abs(rExp)/255; var gExp = firstColor.g - secondColor.g; var gAdditive = Math.abs(gExp)/255; var bExp = firstColor.b - secondColor.b; var bAdditive = Math.abs(bExp)/255; var range = createColorRange(firstColor, secondColor); console.log(range); var pointer = 0; // This gently cycles through // all the colors on a single element function rotateColors() { var currentColor = range[pointer]; document.getElementById("test").style.backgroundColor = "rgb("+currentColor.r+","+currentColor.g+","+currentColor.b+")"; pointer++; if (pointer < range.length) window.setTimeout(rotateColors, 5); } rotateColors(); // say I have 5 elements // so I need 5 colors // I already have my first and last colors // but I need to locate the colors between // my start color and my end color // inside of this range // so I divide the range's length by the // number of colors I need // and I store the index values of the middle values // those index numbers will then act as my keys to retrieve those values // and apply them to my element var myColors = {}; var objects = document.querySelectorAll('.test'); myColors.num = objects.length; var determineColors = function(numOfColors, colorArray) { var colors = numOfColors; var cRange = colorArray; var distance = Math.floor(cRange.length/colors); var object = document.querySelectorAll('.test'); var j = 0; for (var i = 0; i < 255; i += distance) { if ( (i === (distance*colors)) ) { object[j].style.backgroundColor = "rgb(" + range[255].r + ", " + range[255].g + ", " + range[255].b + ")"; j = 0; // console.log(range[i]); } else { // Apply to color to the element object[j].style.backgroundColor = "rgb(" + range[i].r + ", " + range[i].g + ", " + range[i].b + ")"; // Have each element bleed into the next with a gradient // object[j].style.background = "linear-gradient( 90deg, rgb(" + range[i].r + ", " + range[i].g + ", " + range[i].b + "), rgb(" + range[i+distance].r + ", " + range[i+distance].g + ", " + range[i+distance].b + "))"; j++; } } }; setTimeout( determineColors(myColors.num, range), 2000); </script> </body>
xolor库具有渐变function。 这将创build一个从开始颜色到结束颜色渐变的8种颜色的数组：
var gradientColors = [] var startColor = "rgb(100,200,50)", endColor = "green" var start = xolor(startColor) for(var n=0; n<8; n++) { gradientColors.push(start.gradient(endColor, n/8)) }
在github上查看更多信息： https ： //github.com/fresheneesz/xolor
您可以检索元素列表。 我不熟悉jQuery，但prototypejs有Element.childElements（），它将返回一个数组。 一旦知道了arrays的长度，就可以确定每步更改多less像素分量。 下面的一些代码我没有用我正在呈现的forms进行testing，但应该有希望给你一个想法。
function hex (c) { var s = "0123456789abcdef"; var i = parseInt (c); if (i == 0 || isNaN (c)) return "00"; i = Math.round (Math.min (Math.max (0, i), 255)); return s.charAt ((i - i % 16) / 16) + s.charAt (i % 16); } /* Convert an RGB triplet to a hex string */ function convertToHex (rgb) { return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]); } /* Remove '#' in color hex string */ function trim (s) { return (s.charAt(0) == '#') ? s.substring(1, 7) : s } /* Convert a hex string to an RGB triplet */ function convertToRGB (hex) { var color[]; color[0] = parseInt ((trim(hex)).substring (0, 2), 16); color[1] = parseInt ((trim(hex)).substring (2, 4), 16); color[2] = parseInt ((trim(hex)).substring (4, 6), 16); } /* The start of your code. */ var start = convertToRGB ('#000000'); /* The beginning of your gradient */ var end = convertToRGB ('#ffffff'); /* The end of your gradient */ var arr = $('.gradientList').childElements(); var len = arr.length(); /* The number of colors to compute */ var alpha = 0.5; /* Alpha blending amount */ for (i = 0; i < len; i++) { var c = []; c[0] = start[0] * alpha + (1 - alpha) * end[0]; c[1] = start[1] * alpha + (1 - alpha) * end[1]; c[2] = start[2] * alpha + (1 - alpha) * end[2]; /* Set the background color of this element */ arr[i].setStyle ({ 'background-color': convertToHex (c) }); }
desau的回答非常好。 这里是在JavaScript中：
function hexToRgb(hex) { var result = /^#?([af\d]{2})([af\d]{2})([af\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } function map(value, fromSource, toSource, fromTarget, toTarget) { return (value - fromSource) / (toSource - fromSource) * (toTarget - fromTarget) + fromTarget; } function getColour(startColour, endColour, min, max, value) { var startRGB = hexToRgb(startColour); var endRGB = hexToRgb(endColour); var percentFade = map(value, min, max, 0, 1); var diffRed = endRGB.r - startRGB.r; var diffGreen = endRGB.g - startRGB.g; var diffBlue = endRGB.b - startRGB.b; diffRed = (diffRed * percentFade) + startRGB.r; diffGreen = (diffGreen * percentFade) + startRGB.g; diffBlue = (diffBlue * percentFade) + startRGB.b; var result = "rgb(" + Math.round(diffRed) + ", " + Math.round(diffGreen) + ", " + Math.round(diffBlue) + ")"; return result; } function changeBackgroundColour() { var count = 0; window.setInterval(function() { count = (count + 1) % 200; var newColour = getColour("#00FF00", "#FF0000", 0, 200, count); document.body.style.backgroundColor = newColour; }, 20); } changeBackgroundColour();
