彩虹在HTML页面上的文本...每个字符是一个不同的随机生成的颜色

Question

我希望能够使用HTML和脚本来创建一个页面，以显示每个字符是不同随机生成的颜色的文本。使用支持创建和使用RBG颜色和Math.random（）方法的JavaScript图形库，制作随机彩色线条/形状/等很简单，但我不知道如何将其应用于文本，更不用说了如何将其应用于每个角色。有任何想法吗？

Answer 1

是由脚本生成的文本，还是以HTML形式提供的文本？如果是前者，请尝试<canvas>。后者更难;我会用JavaScript包装每个角色<span style="color:#rrggbb">（这会很慢）。

Answer 2

这里是我的代码：

<script type="text/javascript"> 
    function toSpans(span) { 
     var str = span.firstChild.data; 
     var a = str.length; 
     span.removeChild(span.firstChild); 
     for (var i = 0; i < a; i++) { 
      var theSpan = document.createElement("SPAN"); 
      theSpan.appendChild(document.createTextNode(str.charAt(i))); 
      span.appendChild(theSpan); 
     } 

    } 

    function RainbowSpan(span, hue, deg, brt, spd, hspd) { 
     this.deg = (deg == null ? 360 : Math.abs(deg)); 
     this.hue = (hue == null ? 0 : Math.abs(hue) % 360); 
     this.hspd = (hspd == null ? 3 : Math.abs(hspd) % 360); 
     this.length = span.firstChild.data.length; 
     this.span = span; 
     this.speed = (spd == null ? 50 : Math.abs(spd)); 
     this.hInc = this.deg/this.length; 
     this.brt = (brt == null ? 255 : Math.abs(brt) % 256); 
     this.timer = null; 
     toSpans(span); 
     this.moveRainbow(); 

    } 

    RainbowSpan.prototype.moveRainbow = function() { 
     if (this.hue > 359) this.hue -= 360; 
     var color; 
     var b = this.brt; 
     var a = this.length; 
     var h = this.hue; 
     for (var i = 0; i < a; i++) { 
      if (h > 359) h -= 360; 
      if (h < 60) { 
       color = Math.floor(((h)/60) * b); 
       red = b; 
       grn = color; 
       blu = 0; 
      } else if (h < 120) { 
       color = Math.floor(((h - 60)/60) * b); 
       red = b - color; 
       grn = b; 
       blu = 0; 
      } else if (h < 180) { 
       color = Math.floor(((h - 120)/60) * b); 
       red = 0; 
       grn = b; 
       blu = color; 
      } else if (h < 240) { 
       color = Math.floor(((h - 180)/60) * b); 
       red = 0; 
       grn = b - color; 
       blu = b; 
      } else if (h < 300) { 
       color = Math.floor(((h - 240)/60) * b); 
       red = color; 
       grn = 0; 
       blu = b; 
      } else { 
       color = Math.floor(((h - 300)/60) * b); 
       red = b; 
       grn = 0; 
       blu = b - color; 
      } 
      h += this.hInc; 
      this.span.childNodes[i].style.color = "rgb(" + red + ", " + grn + ", " + blu + ")"; 
     } 
     this.hue += this.hspd; 

    } 
</script> 
<center> 
    <p id="r3">&copy Copyright 2013 by K45KMT</p> 
</center> 
<script type="text/javascript"> 
    var r3 = document.getElementById("r3"); 

    var myRainbowSpan2 = new RainbowSpan(r3, 0, 360, 255, 50, 348); 

    myRainbowSpan2.timer = window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed); 

    var colour = "#FF2535"; 
</SCRIPT>