adob animate JS не может рисовать на холсте

Question

Невозможно нарисовать прямоугольник на холсте с помощью JavaScript в Adobe Animate с кодом ниже.Успешно только при использовании функции Createjs Ticker с eventListener.Пожалуйста, обратите внимание, что я не спрашиваю об анимации - я просто рисую что-то на холсте.Я нахожусь в коде или в концептуальной ошибке?Заранее благодарим за добрую помощь новичку.

this.stop();

//Line below not needed as far as I checked (when in in Adobe Animate)
//var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

// I get the rectangle and text on Canvas ONLY when I uncomment the three commented lines below

//createjs.Ticker.addEventListener("tick", handleTick);

//function handleTick() {
    alert("ctx 25")
    ctx.lineWidth = 5;
    ctx.strokeRect(20, 20, 100, 100);
    ctx.font = "bold 25px Verdana";
    ctx.fillText("Index", 200, 70);
//}

Answer 1

Вы обращаетесь к контексту напрямую.EaselJS будет очищать холст каждый раз, когда он перерисовывает.

Существует несколько способов добавить собственный контент: 1. Убедитесь, что это происходит после stage.update() или после метода draw ребенка. 2. Нарисуйте на внешнем холсте.и использовать его в качестве источника растрового изображения 3. Вместо этого рисуйте в список отображения EaselJS.

Вот как рисовать на сцене, используя EaselJS

// You just need to do this once, not on every tick
var shape = new createjs.Shape();
shape.graphics.setLineStyle(5).drawRect(0,0,100,100);
shape.set({x: 20, y: 20}); // You can also set the x/y directly, or offset the shape in the drawRect call
stage.addChild(shape); // Wherever the stage is constructed.

var text = new createjs.Text("Index", "bold 25px Verdana", "#000");
text.set({x: 200, y:70});
stage.addChild(text);

Надеюсь, это поможет!