javascript - 如何将 swf 文件导入 Canvas

Question

我想将 swf 文件导入到我的 Canvas 中这是我的鳕鱼

如果我预加载了我的 swf，我的功能就实现了

var canvas, stage, exportRoot, images;


function init() {

    canvas = document.getElementById("canvas");

    images = images||{};

    var manifest = [
        {src:"/...octo12.swf"},

    ];


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


    loader.onProgress = handleProgress;
    stage = new createjs.Stage(canvas);
    createjs.Ticker.setFPS(22);
    createjs.Ticker.addEventListener("tick", stage);

    var image = new createjs.Bitmap("/../logo.png");
    image.x = 300;
    image.y = 150;

    stage.addChild(image);

    var progress = new createjs.Shape();

    var progressBellow = new createjs.Shape();
    progress.graphics.beginStroke("#FF00FF").drawRect(450,440,500,30);
    progressBellow.graphics.beginStroke("#FF00FF").drawRect(450,440,500,30);
    // progress.graphics.setStrokeStyle(8,"round").beginStroke("#FFF");


    function handleProgress(event) {
        progress.graphics.clear();
        // Draw the progress bar
        progress.graphics.beginFill("#FF00FF").drawRect(450,440,500*(event.loaded / event.total),30);

    }

    stage.addChild(progress,progressBellow);
    stage.update();
}


function handleComplete() {
//================================stage==========================================================

    stage = new createjs.Stage(canvas);

//================================child==========================================================

    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();

//================================ticker=========================================================

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener("tick", stage);

。我有 home.html 我尝试导入它们

<canvas id="canvas"  width="1300" height="800" style="max-height: 100%;height: 25%;width: 20%;margin-left:40%;margin-top: 15%">
    <object width="400" height="50" data="/..../swf/octo12.swf"></object>
</canvas>

导入不起作用，我如何将它们导入到 Canvas 元素中谢谢。

Answer 1

您应该使用createjs.DomElement为了这。将对象移出 Canvas 元素并为其指定一个 id。

   <canvas id="canvas"  width="1300" height="800"></canvas>
   <object id="myswf" width="400" height="50" data="/..../swf/octo12.swf"></object>

然后您可以使用 domElement 来包装它并将其添加到您的舞台，如下所示(假设您使用的是 jQuery):

var domElement = new createjs.DOMElement($("#myswf"));
stage.addChild(domElement);