Question

所以我用Animate CC制作了一个动画，并将其导出到HTML5画布。不，我想在基于类的多个画布中使用动画。它在调用ID时工作正常，但只有第一个#ovals-bg具有渲染动画。我的猜测是createjs-2015.11.26.min.js通过ID调用内容。我可以在custom.js文件中做些什么来解决这个问题吗？

HTML：

<html>
    <head>
        <meta charset="UTF-8">
        <title>Lumiere TEST</title>

        <link rel="stylesheet" type="text/css" href="lumiere.css">
        <script type='text/javascript' src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
        <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js?ver=4.2.7"></script>
        <script type='text/javascript' src="js/includes/animatioj.js"></script>
        <script type='text/javascript' src="js/custom.js"></script>
    </head>
    <body onload="init();" style="background-color:#D4D4D4;margin:0px;">
        <div id="wrap">
            <ul class="lumeiere-thumbs cf">
                <li class="thumb">
                    <canvas class="squares" class="canvas" width="510" height="510" style="background-color:none"></canvas>
                    <canvas id="ovals-bg" class="canvas ovals-bg" width="510" height="510" style="background-color:none"></canvas>
                </li>
                <li class="thumb">
                    <canvas class="squares" class="canvas" width="510" height="510" style="background-color:none"></canvas>
                    <canvas id="ovals-bg" class="canvas ovals-bg" width="510" height="510" style="background-color:none"></canvas>
                </li>

            </ul>
        </div>
    </body>
</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);

}

JS-错误：

man page

编辑1：

所以我尝试了下面建议的编辑：

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


        for (i = 0; i < ovalsBG.length; i++)  {
            /* ovalsBG_stage = new createjs.Stage(ovalsBG); <-- this renders nothing */
            ovalsBG_stage = new createjs.Stage(ovalsBG[i]); /* <-- this renders one stage in the second class-item. */
            ovalsBG_stage.addChild(ovalsBG_Root);
            ovalsBG_stage.update();

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

        }

Answer 1

首先，您有2个具有相同ID的canvas元素。 ID必须唯一。这就是为什么只有具有指定id的第一个元素才起作用，因为getElementById只返回第一个匹配。并且还为同一个类属性（class=""）下的元素声明所有类，没有理由声明多个。

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

如果你决定使用数组，你只需要：

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

Answer 2

getElementsByClassName() API会返回object之类的集合，其基本上类似于Array DOM Objects。 getElementById() API会返回DOM Object。

如果您将代码更改为

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

它会正常工作。

但是，请注意，这仅适用于具有类ovals-bg的FIRST元素。

更新：

由于我不知道这些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);
    }
}

Answer 3

解释您的代码

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

Answer 4

所以我终于让它工作了@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);

    }

}

对HTML5-canvas动画使用类而不是ID会导致js-error

4 个答案: