javascript - キャンバス内の正しい座標 (x,y) で画像を回転する

Question

質問は他の質問に関連しています:少なくともその部分。正しい x 値と y 値を取得します。

私が開発しているアプリでは、ユーザーが顔のない面白いキャラクターの 6 種類の背景を持つ画像を作成して、ユーザーが自分の顔の写真を貼ることができます。これを行うには、画像をドラッグ、ピンチしてズーム、回転します。ドラッグしてピンチしてズームすることは制御できますが、画像を回転させると、正確な座標で画像を一致させることができません。画像は常に少し上がります。

例として、次の値を取得します。

x: 30、y: 80、スケール: 0.5、度: 40。

そのため、回転した画像をキャンバスに描くと、角度によってyが少し上がるようです。度数が少ないほど、上がらない。

この関数を使用して、回転した画像を描画しています。

var TO_RADIANS = Math.PI / 180;
var drawRotatedImage = function (context, image, x, y, angle) {
    context.save();

    context.translate(x, y);

    context.rotate(angle * TO_RADIANS);

    context.drawImage(image, -(image.width / 2), -(image.height / 2));

    context.restore();

}

PD: 指摘すると、画像を回転させないと、正しい位置に完全に一致します。

回転した画像の正しい x 値と y 値を取得するにはどうすればよいですか?