Easel.js帆布没有更新

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

你转动不喜欢的工作，你可能认为它是。

“字符”的来源是0,0 - 而不是drawRect调用的x,y。通过旋转它，你可能会将它移出画布/视线。

将startX和startY更改为100，然后看到部分多维数据集出现！ （在小提琴中）

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

Answer 2

您通常需要移动始终从原点（0,0）开始绘制图形的形状坐标。

所以不是

character.graphics.beginFill("red").drawRect(x, y, 100, 100); 

你应该有类似

character.graphics.beginFill("red").drawRect(0, 0, 100, 100); 
character.x = x; 
character.y = y; 

FIDDLE