同一页面上多个 <canvas> 元素的初始化脚本答案

【问题标题】：Init script on multiple <canvas> elements on same page同一页面上多个 <canvas> 元素的初始化脚本
【发布时间】：2018-02-20 10:39:51
【问题描述】：

我正在使用一个名为 Granim 的 jQuery 渐变动画脚本来生成平滑的背景渐变，我发现它看起来比 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>

JQUERY

// 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
           }
    }
});

【问题讨论】：

标签： jquery foreach gradient repeat

【解决方案1】：

在Granim documentation 中声明element 属性可以是字符串或HTMLCanvasElement，因此您可以简单地循环您的.gradient-bg 元素并将它们作为对实例化调用的引用：

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

【讨论】：

嘿，罗里，太棒了，非常感谢。这很有魅力，只是对代码中的 2 个错字进行了非常小的编辑。非常感谢。
您认为在页面上多次使用带有此脚本的画布元素会导致严重的性能问题吗？
是的，可能，尤其是像大量动画背景这样图形密集的东西。这就是为什么 CSS 是一个更好的解决方案的原因——它是硬件加速的。 JS 不是。