Javascript 循环梯度

Javascript 循环梯度,javascript,canvas,frontend,Javascript,Canvas,Frontend,我希望获得某种形式的起点/方向,以实现梯度循环,类似于天线的循环: 任何帮助都将不胜感激。这是在上述网站上进行颜色循环的代码: Module("GradientCycle", { bones: "<div></div>", noGradient: "Please use a modern browser (like Chrome, Firefox or Safari) to fully enjoy this site", saturation: 0

我希望获得某种形式的起点/方向,以实现梯度循环,类似于天线的循环:


任何帮助都将不胜感激。

这是在上述网站上进行颜色循环的代码:

Module("GradientCycle", {
    bones: "<div></div>",
    noGradient: "Please use a modern browser (like Chrome, Firefox or Safari) to fully enjoy this site",
    saturation: 0.5,
    value: 1,
    angle: 120,
    loopSpeed: 50,
    webkitCSS: "-webkit-gradient(linear, left bottom, left top,color-stop(0, rgb(RGB1)),color-stop(.5, rgb(RGB2)),color-stop(1, rgb(RGB3)))",
    geckoCSS: "-moz-linear-gradient(center bottom,rgb(RGB1) 0%,rgb(RGB2) 50%,rgb(RGB3) 100%);",
    init: function() {
        this.css = this.testCSS();
        this.seed = this.hue || Math.floor(Math.random() * 360)
    },
    testCSS: function() {
        return $("html").hasClass("webkit") ? this.webkitCSS : $("html").hasClass("gecko") ? this.geckoCSS : null
    },
    setCol: function() {
        var e = (++this.seed) % 360,
            m = this.saturation,
            l = this.value,
            k = this.angle,
            j = (e + 180 + k) % 360,
            g = (e + 180 - k) % 360,
            d = hsvToRgb(e / 360, m, l),
            c = hsvToRgb(j / 360, m, l),
            b = hsvToRgb(g / 360, m, l),
            f = this.css.replace(/RGB1/, d.join(",")).replace(/RGB2/, c.join(",")).replace(/RGB3/, b.join(","));
        this.$.attr("style", "background:" + f);
        return this
    },
    start: function() {
        if (!this.css) {
            return this.$.html(this.noGradient)
        }
        this.stop();
        this.loop = setInterval($.proxy(this.setCol, this), this.loopSpeed);
        return this
    },
    stop: function() {
        clearInterval(this.loop);
        return this
    }
});

基本上可以归结为修改CSS3渐变的颜色值。

–哦,谢谢。但不确定如何在标题中实现类似的内容。有什么想法吗?