javascript - Easel.js Canvas 未更新

Question

我有以下代码，我尝试使用 createjs 绘制一个矩形

function Game(canvas) {
    var stage = new createjs.Stage(canvas),
        character = new createjs.Shape();

    this.init = function (x, y, angle) {
       character.graphics.beginFill("red").drawRect(x, y, 100, 100);
       character.rotation = angle;
       stage.addChild(character);
       stage.update();
    }

}

Game.run = function (canvas) {
    var game = new Game(canvas),
        startX = 400,
        startY = 200,
        startAngle = 45;
    game.init(startX, startY, startAngle);

}

但它不显示任何内容。我错过了一些明显的事情吗？

jsfiddle of the issue

Answer 1

您的轮换并不像您想象的那样有效。

“Angular 色”的原点位于 0,0 - 而不是 drawRect 调用的 x,y 处。通过旋转它，您可能会将其移出您的 Canvas /视线。

将 startX 和 startY 更改为 100，然后看到立方体的一部分出现了! (在 fiddle 中)

如果您希望仅将旋转应用于相对于其自身左上角的立方体。您应该调用drawRect(0, 0, 100, 100)来绘制它并更改character的x和y属性来移动方 block .