多次加载动画cc的html5画布发布答案

【问题标题】：Load html5 canvas publish of animate cc multiple times多次加载动画cc的html5画布发布
【发布时间】：2018-04-24 08:23:23
【问题描述】：

Animate CC 的发布输出给出了 html 文件和 js 文件。我想在同一个画布上画两次同一张图。从这个example，我想输出为

如何在没有两个画布标签的情况下更改 javascript 来实现这一点？我想在单个画布标签中有很多它的实例。

【问题讨论】：

标签： javascript canvas createjs animate-cc

【解决方案1】：

如果你想实现上面的图像，你可以简单地创建simple_canv 类的两个实例。

试试这个：

var canvas, stage, exportRoot;

function init() {

 canvas = document.getElementById("canvas");
 exportRootLeft = new lib.simple_canv();
 exportRootRight = new lib.simple_canv();
 exportRootRight.x = 555;

 stage = new createjs.Stage(canvas);
 stage.addChild(exportRootLeft, exportRootRight);
 stage.update();
 stage.enableMouseOver();

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


 init_app()

}

另外，记得增加画布的宽度。

【讨论】：

【解决方案2】：

这是你要找的吗？

<!DOCTYPE html>
<html>
    <body>

        <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
            Your browser does not support the canvas element.
        </canvas>

        <script>
            var canvas = document.getElementById("myCanvas");

            var ctx1 = canvas.getContext("2d");
            var ctx2 = canvas.getContext("2d");

            ctx1.fillStyle = "red";
            ctx1.fillRect(0,0,50,50);

            ctx2.fillStyle = "blue";
            ctx2.fillRect(50,0,50,50);
        </script>

    </body>
</html>

然后您可以更改渲染的内容。

【讨论】：