javascript - HTML5はキャンバスコンテキストではなく画像のみを回転させます

Question

キャンバス内で画像を回転させる方法はありますか? 私が見つけた唯一のことは、キャンバスのコンテキスト全体を回転させることです。キャンバス上で画像を個別に回転させたい。

Answer 1

残念ながら、画像を直接回転することはできません。

幅 W と高さ H の画像を位置 X、Y に表示したい場合にできることは、画像の中央にピボットを置いて角度 A (ラジアン単位) で回転させることです。

ctx.translate(-X - W / 2, -Y - H / 2);
ctx.rotate(A);
ctx.drawImage(YOUR_IMAGE, 0, 0);
ctx.rotate(-A);
ctx.translate(X + W / 2, Y + H / 2);