javascript - 如何使用 create js 在 Canvas 上添加 html DOM 元素？

Question

下面的代码无法在 Canvas 上添加 dom 元素

        var stage = new createjs.Stage('mycanvas');
        var html = document.createElement('div');
        html.id = 'ab';
        html.style.height = '50px';
        html.style.width = '100px';
        html.style.backgroundColor = '#000000';
        $('body').append(html);
        var gg = new createjs.DOMElement(html);
        gg.x = 0;
        gg.y = 0;
        stage.addChild(gg);
        stage.update();

Answer 1

需要设置position为“absolute”，然后设置top和left属性。 DOMElement 只是设置对象的变换。

这是一个快速示例，使用 Tween 对形状进行补间。 http://jsfiddle.net/TeVZ6/

var stage = new createjs.Stage("canvas");

var html = document.createElement('div');
html.id = 'ab';
html.style.height = '50px';
html.style.width = '100px';
html.style.backgroundColor = '#000000';
html.style.position = "absolute";
html.style.top = 0;
html.style.left = 0;

document.body.appendChild(html);

var gg = new createjs.DOMElement(html);
gg.x = 20;
gg.y = 20;
stage.addChild(gg);
stage.update();

createjs.Tween.get(gg).to({x:400}, 1000);
createjs.Ticker.addEventListener("tick", stage);