如何在 Javascript 中生成彩虹色文本？

Question

我需要一个简单的 javascript 彩虹函数。

Answer 1

方案一：Javascript + HSL

这应该适用于任何浏览器

window.addEventListener("load", function() {
  var elements = document.getElementsByClassName("rainbowText");
  for (let i = 0; i < elements.length; i++) {
    generateRainbowText(elements[i]);
  }
});

function generateRainbowText(element) {
  var text = element.innerText;
  element.innerHTML = "";
  for (let i = 0; i < text.length; i++) {
    let charElem = document.createElement("span");
    charElem.style.color = "hsl(" + (360 * i / text.length) + ",80%,50%)";
    charElem.innerHTML = text[i];
    element.appendChild(charElem);
  }
}

p {
  font-size: 2em;
  font-weight: 500;
}

<p class="rainbowText">This is an awesome text</p>

方案二：背景剪辑+线性渐变

这是一个仅限 webkit 的答案（Chrome），但应该更有效。

更新 (01/2021)：现代浏览器支持此功能。

有关兼容性列表，请在此处 (MDN)检查background-clip: text（包括仅支持 -webkit- 前缀的那些）

let nb_stops = 10; // 10 color stops should be enough
let dir = "left"; // left, right, top, bottom

function SetupRainbow() {
  var rainbowStr = GetRainbowString(nb_stops, 80, 50);
  var oppositeDir = (dir==="left"?"right":(dir==="right"?"left":(dir==="top"?"bottom":"top")));
  var css = '.rainbowText {\
   background-clip: text;\
   color: transparent;\
   -webkit-background-clip: text;\
   -webkit-text-fill-color: transparent;\
   background-image: -webkit-linear-gradient(' + dir + ',' + rainbowStr + '); \
   background-image: linear-gradient(to ' + oppositeDir + ',' + rainbowStr + ') \
}'

  var style = document.createElement("style");
  style.type = 'text/css';
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  document.head.appendChild(style);
}


// function that generate the rainbow string
function GetRainbowString(nbStops, saturation, luminosity) {
  let gap = 360 / nbStops,
    colors = [];
  for (let i = 0; i < nbStops; i++) {
    colors.push("hsl(" + (i * gap) + "," + saturation + "%," + luminosity + "%)");
  }
  return colors.join();
}



window.addEventListener("load", function() {
  SetupRainbow();
});

span {
  font-size: 2em;
  font-weight: 500;
}

<span class="rainbowText">This is an awesome text</span>