如何在一页上放置多个画布js动画。（创建js）答案

【问题标题】：How to put multiple canvas js animations on one page. (Createjs)如何在一页上放置多个画布js动画。（创建js）
【发布时间】：2015-11-09 07:09:10
【问题描述】：

我正在尝试将多个 js 动画放在一个 html 页面上。我只用两个动画开始了我的测试。我想一旦我学会了如何实现两个，我就可以轻松实现十个。

我正在使用 Flash CC 发布 html5 画布动画（输出一个简单的 html 文件和一个 js 文件）。一种动画称为“船”，另一种称为“汽车”。就目前而言，只有“船”出现在屏幕上。

下面是我的代码。（还有所有源文件的链接。）我不是 javascript/编码专家，但我是故障排除者/实验者。我已经重新定位代码，尝试重命名变量等。我很确定最大的问题是 createjs 变量。我看到页面上的其他任何地方都没有调用 createjs 变量......所以我猜它正在远程 js 脚本中使用？我已将 var createjs = createjs_car 注释掉，因为如果没有注释，则不会出现动画。

无论如何，我正在寻求帮助以使两个（或更多）动画在同一页面上运行。提前致谢！

想要源文件？点击这里： Click here

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations on One Page</title>

<script>
	// change the default namespace for the CreateJS libraries:
	var createjs_ship = createjs_ship||{};
	var createjs = createjs_ship;
</script>
<!-- I've commented this out because if the commenting is removed, no animation shows up.
<script>
	// change the default namespace for the CreateJS libraries:
	var createjs_car = createjs_car||{};
	var createjs = createjs_car;
</script>-->
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>

<script>
var canvas, stage, exportRoot;

function init_ship() {
	canvas = document.getElementById("canvas_ship");
	exportRoot = new libs_ship.ship();

	stage = new createjs_ship.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs_ship.Ticker.setFPS(libs_ship.properties.fps);
	createjs_ship.Ticker.addEventListener("tick", stage);
}
function init_car() {
	canvas = document.getElementById("canvas_car");
	exportRoot = new libs_car.car();

	stage = new createjs_car.Stage(canvas);
	stage.addChild(exportRoot);
	stage.update();

	createjs_car.Ticker.setFPS(libs_car.properties.fps);
	createjs_car.Ticker.addEventListener("tick", stage);
}

</script>
</head>

<body onload="init_ship(); init_car();" style="background-color:#D4D4D4">
	<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
    <canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>

【问题讨论】：

仅供参考，我看到 2 个平行的空白画布。您能否确认问题是在屏幕上显示 2 个画布还是 2 个动画？

标签： javascript html animation canvas

【解决方案1】：

所以我已经让他们一起玩了：

在 car.js、ship.js 和 init 函数中用 create_js 替换对 createjs_XXX 的引用
删除关联的变量实例化
组合初始化函数

请看下面和codepen example here

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Multiple Canvas Animations on One Page</title>

    <script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
    <script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
    <script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
    <script src="ship.js"></script>
    <script src="car.js"></script>

    <script>

        function init() {

            var canvas, stage, exportRoot;

            canvas = document.getElementById("canvas_ship");
            exportRoot = new libs_ship.ship();

            stage = new createjs.Stage(canvas);
            stage.addChild(exportRoot);
            stage.update();

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


            canvas = document.getElementById("canvas_car");
            exportRoot = new libs_car.car();

            stage = new createjs.Stage(canvas);
            stage.addChild(exportRoot);
            stage.update();

            createjs.Ticker.setFPS(libs_car.properties.fps);
            createjs.Ticker.addEventListener("tick", stage);
            }
    </script>
    </head>

    <body onload="init();" style="background-color:#D4D4D4">
        <canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
        <canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
    </body>
</html>

JAVASCRIPT：

(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes


// library properties:
lib.properties = {
    width: 300,
    height: 250,
    fps: 24,
    color: "#FFFFFF",
    manifest: []
};


// symbols:
(lib.ship_1 = function() {
    this.initialize();

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#0E586C").s().p("ArnDcQiHigAjkXIaeAAQh0Dbl1Dcg");
    this.shape.setTransform(85.1,113);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#C0D0D7").s().p("AnFGVQDllvjlm6IMoAAQDHGnjHGCg");
    this.shape_1.setTransform(101.6,40.5);

    this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(0,0,170.3,135);


// stage content:
(lib.ship = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer 2
    this.instance = new lib.ship_1();
    this.instance.setTransform(-4.9,107.5,1,1,0,0,0,85.2,67.5);

    this.timeline.addTween(cjs.Tween.get(this.instance).to({x:390.1},128).wait(1));

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#9DC7D7").s().p("A3bIIIAAwPMAu2AAAIAAQPg");
    this.shape.setTransform(150,52);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#438896").s().p("A3bLaIAA2yMAu2AAAIAAWyg");
    this.shape_1.setTransform(150,177);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(129));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(59.9,125,390.2,250);

})(libs_ship = libs_ship||{}, images_ship = images_ship||{}, createjs = createjs||{}, ss = ss||{});
var libs_ship, images_ship, createjs, ss;

JAVASCRIPT：

(function (lib, img, cjs, ss) {

var p; // shortcut to reference prototypes

// library properties:
lib.properties = {
    width: 300,
    height: 250,
    fps: 24,
    color: "#FFFFFF",
    manifest: []
};


// symbols:
(lib.ship = function() {
    this.initialize();

    // Layer 2
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#000000").s().p("AGgBwQgvguAAhCQAAhBAvgvQAvguBDAAQBCAAAuAuQAwAvAABBQAABCgwAuQguAwhCgBQhDABgvgwgAqCBwQgugugBhCQABhBAugvQAvguBCAAQBDAAAvAuQAuAvABBBQgBBCguAuQgvAwhDgBQhCABgvgwg");
    this.shape.setTransform(84.2,140);

    // Layer 1
    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#E58A2B").s().p("AtYDcQgwjHDUhZICqAAQBGiGAygRIJ+AAQBvAzA7B3IFoAxQBSBNASCPg");
    this.shape_1.setTransform(86.5,113);

    this.addChild(this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-0.1,91,173.3,65);


// stage content:
(lib.car = function(mode,startPosition,loop) {
    this.initialize(mode,startPosition,loop,{});

    // Layer 2
    this.instance = new lib.ship();
    this.instance.setTransform(-4.9,107.5,1,1,0,0,0,85.2,67.5);

    this.timeline.addTween(cjs.Tween.get(this.instance).to({x:390.1},128).wait(1));

    // Layer 1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#A57F57").s().p("A3bIIIAAwPMAu2AAAIAAQPg");
    this.shape.setTransform(150,52);

    this.shape_1 = new cjs.Shape();
    this.shape_1.graphics.f("#666666").s().p("A3bLaIAA2yMAu2AAAIAAWyg");
    this.shape_1.setTransform(150,177);

    this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).wait(129));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(59.7,125,390.3,250);

})(libs_car = libs_car||{}, images_car = images_car||{}, createjs = createjs||{}, ss = ss||{});
var libs_car, images_car, createjs, ss;

【讨论】：

ps。如果这不起作用，您能否上传您的船和汽车代码以便我们复制整个流程？
谢谢，Visualife。我试了一下，它没有用。但正如你所问的，我已经添加了一个指向上面源文件的链接。感谢您的帮助。
@frogseatflies 为延迟道歉 - 工作电话。我已经用两个动画一起工作的解决方案更新了答案，希望这是令人满意的。