js顏色漸變實現
阿新 • • 發佈:2018-11-15
/** * 顏色漸變 * num:顏色個數 */ function fColorGradualChange(startColor, endColor, num) { var rgb = /^rgb|RGB\((([0-9]|[1-9]\d|1\d\d|2([0-4]\d|5[0-5])),){2}([0-9]|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\)$/; //rgb var hex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i; //16進位制 //顏色預處理 var startRGB, endRGB; if (hex.test(startColor)) { startRGB = fAnalysisRGB(startColor); } else if (rgb.test(startColor)) { startRGB = startColor.substring(3, 15).split(','); } if (hex.test(endColor)) { endRGB = fAnalysisRGB(endColor); } else if (rgb.test(startColor)) { endRGB = endColor.substring(3, 15).split(','); } var startR = startRGB[0], startG = startRGB[1], startB = startRGB[2]; var endR = endRGB[0], endG = endRGB[1], endB = endRGB[2]; var sR = (endR - startR) / num; var sG = (endG - startG) / num; var sB = (endB - startB) / num; var colors = []; for (var i = 0; i < num; i++) { colors .push(fColorToHex(parseInt((sR * i + startR)), parseInt((sG * i + startG)), parseInt((sB * i + startB)))); } return colors ; } /** * 解析rgb格式 */ function fAnalysisRGB(color) { var color = color.toLowerCase().substring(1, color.length); var colors= []; colors.push(parseInt(color.substring(0, 2), 16)) colors.push(parseInt(color.substring(2, 4), 16)) colors.push(parseInt(color.substring(4, 6), 16)) return colors; } /** * rgb轉hex */ function fColorToHex(r, g, b) { var hex = "#" + fAddZero(r.toString(16)) + fAddZero(g.toString(16)) + fAddZero(b.toString(16)); return hex; } /** * 加0補位 */ function fAddZero(v) { var newv = "00" + v; return newv.substring(newv.length - 2, newv.length); }