javascript – 如何使用create js在画布上添加html DOM元素？

下面的代码不适用于在画布上添加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();

解决方法:

您需要将位置设置为“绝对”,然后设置顶部和左侧属性. 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);

标签：javascript,createjs
来源： https://codeday.me/bug/20190528/1173722.html