Question

我有一个定期刷新画布元素的功能（游戏类型）。

其中一个绘制的对象应该能够旋转：

myObject = {};
...
myObject.radian = 0.75;
...

我现在面临的问题是，当我通过执行以下操作将此旋转应用于我的绘图程序时：

ctx.moveTo(CANVAS_WIDTH / 2, CANVAS_HEIGHT / 2);
ctx.rotate(myObject.radian);
ctx.drawImage(...

它不设置旋转的绝对值，而是将其添加到处理最后一帧时使用的值。如果我可以通过访问旧的旋转值来计算增量，那就不会有问题，但是当我console.log(ctx)它似乎没有附加任何旋转信息时。

有没有办法做到这一点，除了摆脱能够为我的对象设置旋转并且不得不使用增量的想法？谢谢！

Answer 1

如http://sgdk2.enigmadream.com/ben/Mobile.html所示，您可以（并且据我所知，应该）使用上下文的保存和恢复功能来组合绘图功能，以便您可以执行相对于活动状态的绘图上下文然后在你完成后返回到预期的状态。那么你不会将上下文留在未知状态进行其他操作。

XFrame.prototype.draw = function(ctx, x, y) {
   ctx.save();
   ctx.transform(this.m11, this.m12, this.m21, this.m22, this.dx+x, this.dy+y);
   ctx.drawImage(this.imageSource, (this.cellIndex % this.graphicSheet.columns) * this.graphicSheet.cellWidth,
      Math.floor(this.cellIndex / this.graphicSheet.columns) * this.graphicSheet.cellHeight,
      this.graphicSheet.cellWidth, this.graphicSheet.cellHeight, 0, 0, this.graphicSheet.cellWidth, this.graphicSheet.cellHeight);
   ctx.restore();
};

有没有办法用绝对值旋转画布绘图上下文？

1 个答案: