Jquery 在多个服务器上初始化脚本<；帆布>；同一页上的元素

我正在使用一个名为jQuery gradient的动画脚本来生成平滑的背景渐变，我发现它看起来比CSS渐变要好得多

目前，当我初始化脚本时，它只在页面上的第一个元素上工作，但我希望它在页面上的许多元素上重复工作

是否可以在一个页面中的多个重复元素上使用Granim

多谢各位

HTML

<canvas class="gradient-bg">It works on this one!</canvas>
<canvas class="gradient-bg">Doesn't work on this one</canvas>
<canvas class="gradient-bg">Doesn't work on this one</canvas>
<canvas class="gradient-bg">Doesn't work on this one</canvas>
<canvas class="gradient-bg">Doesn't work on this one</canvas>

在中，它声明

元素

属性可以是字符串或

HTMLCanvasElement

，因此您可以简单地循环使用

.gradient bg

元素，并将它们作为实例化调用的参考：

$（'.gradient bg'.each（function（））{
var newInstance=newgranim({
元素：this，//注意此处的引用
defaultStateName:'state-1'，
方向：“左-右”，
不透明度：[1,1,1,1]，
我是在看不到的时候说的：是的，
国家：{
“国家1”：{
梯度：[
[#AA076B'，#61045F']，
['02AAB0'，'00CDAC']
],
过渡速度：2500
}
}
});
});

嘿，Rory，太棒了，非常感谢。这很有魅力，只是对代码中的两个排版进行了一次非常小的编辑。非常感谢。您认为在页面上多次使用画布元素和此脚本会导致严重的性能问题吗？是的，可能，特别是在使用大量动画背景等图形密集型内容时这就是为什么CSS是一个更好的解决方案——它是硬件加速的。JS不是。

// init
var newInstance = new Granim({
    element: '.gradient-bg',
    defaultStateName: 'state-1,
    direction: 'left-right',
    opacity: [1,1,1,1],
    isPausedWhenNotInView: true,
        states : {
            "state-1": {
                gradients: [
                    ['#AA076B', '#61045F'],
                    ['#02AAB0', '#00CDAC']
            ],
            transitionSpeed: 2500
           }
    }
});