Любой способ повернуть контекст рисования холста на абсолютное значение?

Question

У меня есть функция, которая периодически обновляет элемент canvas (игровая ситуация).

Предполагается, что один из нарисованных объектов может вращаться:

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