Javascript 对HTML5画布动画使用类而不是ID会导致js错误

所以我用Animate CC制作了一个动画，并将其导出到HTML5画布。 不，我想在基于类的多个画布中使用动画。调用ID时，它可以正常工作，但是只有第一个

#ovals bg

具有渲染动画。我猜

createjs-2015.11.26.min.js

是通过

ID

调用东西的。我可以在custom.js文件中做些什么来解决这个问题吗

Html:

卢米埃试验

custom.js：

function init() {

    // ovalsBG = document.getElementById("ovals-bg"); <--- This works fine
    ovalsBG = document.getElementsByClassName("ovals-bg");
    ovalsBG_Root = new lib.ovalsBG();

    ovalsBG_stage = new createjs.Stage(ovalsBG);
    ovalsBG_stage.addChild(ovalsBG_Root);
    ovalsBG_stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", ovalsBG_stage);

}

函数init（）{
//ovalsBG=document.getElementById（“ovals bg”）首先，您有两个具有相同id的画布元素。id必须是唯一的。这就是为什么只有具有指定id的第一个元素才能工作的原因，因为
getElementById
只返回第一个匹配项。并且还为同一类属性下的元素声明所有类（
class=”“
），则没有理由申报多个

其次，当您将变量设置为类选择器时，该变量将成为该类中所有元素的数组，这就是为什么您无法使用画布，因为您试图使用数组而不是单个选择

如果您决定使用阵列，您只需要：

for(i = 0; i < ovalsBG.length; i++) {
    // perform canvas stuf here
    // ovalsBG[i].dowhatever
}

for（i=0；i
getElementsByClassName（）

API返回的集合类似于

对象

，它本质上类似于

DOM对象

的

数组

。而

getElementById（）

API返回的是

DOM对象

如果您将代码更改为

ovalsBG=document.getElementsByClassName（“ovals bg”）[0]；

它会很好用的

但是，请注意，这仅适用于具有类

ovals bg

的第一个元素

更新：

由于我不知道这些

lib.ovalsBG

和

createjs.Stage

类代表什么，我将使用灯塔来解决您的问题

function init() {
    ovalsBG = document.getElementsByClassName("ovals-bg");
    ovalsBG_Root = new lib.ovalsBG();
    for(var elem in ovalsBG){
        var ovalsBG_stage = new createjs.Stage(ovalsBG[elem]);
        ovalsBG_stage.addChild(ovalsBG_Root);
        ovalsBG_stage.update();

        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", ovalsBG_stage);
    }
}

解释你的代码

 ovalsBG = document.getElementsByClassName("ovals-bg");

返回元素数组，但您的要求是获取单个元素。因此，请使用索引访问该单个元素。假设您需要数组中的第一个元素，则可以使用此代码

 ovalsBG = document.getElementsByClassName("ovals-bg")[0]; // note the [0]

---

既然问题是用

jquery

标记的，为什么不这样简单呢

 ovalsBG = $("ovals-bg:eq(0)"); //eq(0) takes the first element

---

编辑1:

问题是我想在多张画布上重复使用相同的动画

根据此注释，您可以将相同的动画应用于具有相同类名的多个画布

function init() {
   $('.ovals-bg').each(function(){      
     ovalsBG = $(this);
     ovalsBG_Root = new lib.ovalsBG();

     ovalsBG_stage = new createjs.Stage(ovalsBG);
     ovalsBG_stage.addChild(ovalsBG_Root);
     ovalsBG_stage.update();

     createjs.Ticker.setFPS(lib.properties.fps);
     createjs.Ticker.addEventListener("tick", ovalsBG_stage);
    });           
}

---

因此，我最终使用下面的@theblindprophet片段实现了它：

function init() {

    //ovalsBG = document.getElementById("ovals-bg");

    ovalsBG = document.getElementsByClassName("ovals-bg");



    for (i = 0; i < ovalsBG.length; i++)  {

        ovalsBG_Root = new lib.ovalsBG();
        ovalsBG_stage = new createjs.Stage(ovalsBG[i]);
        ovalsBG_stage.addChild(ovalsBG_Root);
        ovalsBG_stage.update();

        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", ovalsBG_stage);

    }

}

函数init（）{
//ovalsBG=document.getElementById（“ovals bg”）；
ovalsBG=document.getElementsByClassName（“ovals bg”）；
对于（i=0；i

是的，我知道ID的东西，只是我的代码有点马虎：）问题是我想在多张画布上重复使用同一个动画，我以后会用php做所有的事情，所以也许我可以使用变量来增加ID名称？你可以使用类名，但随后使用loopWell迭代返回的数组，并使用该解决方案我也可以使用ID…lib.ovalsBG调用Animate CC生成的动画（ovalsBG是函数名）。createjs.Stage也来自Animate CC导出。不确定是否存在。

function init() {
   $('.ovals-bg').each(function(){      
     ovalsBG = $(this);
     ovalsBG_Root = new lib.ovalsBG();

     ovalsBG_stage = new createjs.Stage(ovalsBG);
     ovalsBG_stage.addChild(ovalsBG_Root);
     ovalsBG_stage.update();

     createjs.Ticker.setFPS(lib.properties.fps);
     createjs.Ticker.addEventListener("tick", ovalsBG_stage);
    });           
}

function init() {

    //ovalsBG = document.getElementById("ovals-bg");

    ovalsBG = document.getElementsByClassName("ovals-bg");



    for (i = 0; i < ovalsBG.length; i++)  {

        ovalsBG_Root = new lib.ovalsBG();
        ovalsBG_stage = new createjs.Stage(ovalsBG[i]);
        ovalsBG_stage.addChild(ovalsBG_Root);
        ovalsBG_stage.update();

        createjs.Ticker.setFPS(lib.properties.fps);
        createjs.Ticker.addEventListener("tick", ovalsBG_stage);

    }

}