Question

使用Adobe Animate中的javascript，无法使用下面的代码在画布上绘制矩形。仅在通过EventListener使用Createjs Ticker函数时成功。请注意，我并不是在问动画，而是在画布上绘制东西。我是在编码还是概念错误？预先感谢初学者的帮助。

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);

希望有帮助！

adob animate JS无法在画布上绘制

1 个答案: