按绝对值旋转画布绘图上下文的任何方法

Any way to rotate canvas drawing context by an absolute value?

本文关键字：上下文 任何 方法 绘图 旋转 绝对值 布绘图      更新时间：2023-09-26

我确实有一个函数可以定期刷新画布元素（游戏类型的情况）。

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

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

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

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

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

除了可以为我的对象设置旋转，而必须使用delta之外，还有什么方法可以做到这一点吗？谢谢

如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();
};
相关文章：