Javascript 如何在一个页面上放置多个canvas js动画。（Createjs）_Javascript_Html_Animation_Canvas

Javascript 如何在一个页面上放置多个canvas js动画。（Createjs）

javascript html animation canvas

Javascript 如何在一个页面上放置多个canvas js动画。（Createjs）,javascript,html,animation,canvas,Javascript,Html,Animation,Canvas,我试图在一个html页面上放置多个js动画。我已经开始了我的测试，只有两个动画。我想一旦我学会了如何实现两个，我就可以轻松地实现十个我使用FlashCC发布html5画布动画（它输出一个简单的html文件和一个js文件）。一个动画称为“船”，另一个称为“车”。目前，只有“船”出现在屏幕上下面是我的代码。（还有所有源文件的链接。）我不是javascript/编码专家，但我是一个疑难解答者/实验者。我重新定位了代码，尝试重命名变量，等等。我很确定最大的问题是createjs变量。我看到creat

我试图在一个html页面上放置多个js动画。我已经开始了我的测试，只有两个动画。我想一旦我学会了如何实现两个，我就可以轻松地实现十个

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

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

无论如何，我正在寻找帮助，使两个（或更多）动画工作在同一页上。提前谢谢

想要源文件吗？单击此处：


一页上有多个画布动画
//更改CreateJS库的默认命名空间：
var createjs|u ship=createjs|u ship{}；
var createjs=createjs_ship；
var画布、stage、exportRoot；
函数init_ship（）{
canvas=document.getElementById（“canvas_ship”）；
exportRoot=new libs_ship.ship（）；
阶段=新的createjs_ship.stage（画布）；
stage.addChild（exportRoot）；
stage.update（）；
createjs_ship.Ticker.setFPS（libs_ship.properties.fps）；
createjs_ship.Ticker.addEventListener（“勾号”，阶段）；
}
函数init_car（）{
canvas=document.getElementById（“canvas_-car”）；
exportRoot=new libs_car.car（）；
阶段=新的createjs_车阶段（画布）；
stage.addChild（exportRoot）；
stage.update（）；
createjs_car.Ticker.setFPS（libs_car.properties.fps）；
createjs_car.Ticker.addEventListener（“勾号”，阶段）；
}

因此，我通过以下方式将两者结合在一起：

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

请看下面和一个例子

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;

仅供参考，我看到两张平行的空白画布。你能确认是屏幕上出现了2张画布还是2张动画吗？附言。如果这不起作用，你能上传你的船和车代码以便我们复制整个过程吗？谢谢，Visualife。我打了一针，但没用。但正如你所问，我已经添加了一个链接到上面的源文件。谢谢你的帮助。@frogseatflies对工作电话的延误表示歉意。我已经用一个解决方案更新了答案，在这个解决方案中，两个动画一起工作，希望是satusfactory。

(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;

(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;