Question

我试图在一个html文件中使用2个不同的画布。我用testfiles（没有包含任何图像）工作得很好。当我使用带有图像的画布时，它不起作用。因此我怀疑我的库设置是错误的。所有文件都是使用adobe CC flash canvas创建的。感谢您提供任何帮助或提示！

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="testfile01.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
canvas = document.getElementById("canvas");
images = images||{};

var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(libnrone.properties.manifest);
}

function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete() {
exportRoot = new libnrone.testfile01();

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

createjs.Ticker.setFPS(libnrone.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="testfile02.js"></script>

<script>
var canvas, stage, exportRoot;

function init2() {
canvas = document.getElementById("canvas2");
images = images||{};

var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad2);
loader.addEventListener("complete", handleComplete2);
loader.loadManifest(libnrtwo.properties.manifest);
}

function handleFileLoad2(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete2() {
exportRoot = new libnrtwo.testfile02();

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

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

</head>

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

Answer 1

<强> [EDIT /更新]

这里的关键问题是您正在重用stage，canvas和exportRoot变量。这适用于你的init函数，但由于handleComplete方法是异步的（它们在加载清单时触发），它们将始终引用第二个实例。

定义第一个实例，并加载内容
定义第二个实例，并加载内容

此时，stage，canvas和exportRoot变量始终引用您定义的第二个实例。

画布的资产1或画布2完成。 stage，canvas和exportRoot ALREADY引用第二阶段。
画布1或画布2的资产完成（以第二个为准）。 stage，canvas和exportRoot STILL只是引用第二阶段。

由于3＆amp;的比赛条件4，您可能偶尔会在第二个画布上看到一个或另一个负载。

要解决此问题，请不要重复使用stage，canvas和exportRoot变量，因为它们都在handleComplete方法中引用。

我在这里上传了一个可用的HTML文件：http://playpen.createjs.com/samples/test_2-canvas.html.zip - 其他一些注意事项：

重新排序脚本并合并两个内联脚本。我认为这使得处理起来更容易
重复使用相同的handleImageLoad方法，因为它是相同的。
删除了第二个Ticker.setFPS()电话。 Ticker目前只有一个FPS，因为只有一个Ticker。

希望有所帮助！

- 更早的回答 -

看一下这个答案：Two Flash cc Animations in the same HTML Page

您只是包含这两个定义，因此您的一些代码会覆盖其他代码。例如，虽然您正在创建init和init2 , there are two handleFileLoad and handleComplete`方法。

此外，您只是＆＃34;滴答作响＆＃34;一个阶段，因为你已经注释了第二个用法。

干杯。

单个HTML页面上的HTML5 2画布

1 个答案: