drawImageで画像を回転させたい

Question

drawImageを使用して画像を回転しようとしています。
アドバイスいただいたコードで一応回転はしているっぽいことはわかりました。

回転させた後、位置を調整すればうまく表示できるのだろうと思うのですが、
基準点がどこにあるのか理解できずどう調整していいのかアドバイスいただきたく。

const image_chara = document.querySelector('#pic_chara');
let image_chara_ratio = image_chara.width / image_chara.height;
dw = width / 4;
dh = width / 4 / image_chara_ratio;
                                
ctx.save();
ctx.rotate(10 * Math.PI / 180);
ctx.drawImage(
    image_chara,
    0, 0,
    image_chara.width, image_chara.height,
    width - dw, height - dh,
    dw, dh
    );
ctx.restore();

０度のとき
−１０度のとき
＋１０度のとき

Comments

[退会済みユーザー]

くまもんだけを回転させたい？どこを軸でどう回転させたい感じ？

[Qoo]

はい、くまもんだけを回転させたいです。
画像の左下になるようにー９０度させたいだけなのですが、
今どこが回転軸になっているかもわかっていません、、

[退会済みユーザー]

ちょっと試してみたいんで、元の質問のコードを完全なコードにしてクレメンス

Answer 1

ググって調べただけですが、以下の記事が役に立ちませんか？

Canvas に回転した画像を表示するサンプル001
https://misc.laboradian.com/html5/rotate-image-canvas-sample/001/

【追記】

下のコメント欄に「そういうことはないと思うのですが。後で検証して結果を回答欄に書いておきます」と述べましたが、それを以下に書きます。

以下の記事の png 画像とコードを流用し、それに少し手を加えて、画像を 5 度ずつ回転させてみました。

Canvas に複数の画像を順番通り描画
http://surferonwww.info/BlogEngine/post/2019/10/24/draw-multiple-images-on-canvas-in-order.aspx

手を加えたところは JavaScript のコードの、

for (let j = 0; j < images.length; j++)
{
    context.drawImage(images[j], j * 20, j * 20);
}

の部分を以下のようにし、

for (let j = 0; j < images.length; j++)
{
    context.save();
    context.rotate(j * 5 * Math.PI / 180);                            
    context.drawImage(images[j], j * 20, j * 20);
    context.restore();
}

canvas の width, height を画像が収まるよう、

<canvas id="mycanvas" width="250" height="250"></canvas>

と少し大きくしただけです。実行結果は以下のようになります。

Comments

[Qoo]

回答ありがとうございます。
サイトを参考に下記のようにして実行してみたのですが、
drawRotatedImage関数内のcontext.save();でエラーになってしまっているようでした。

const image_chara = document.querySelector('#pic_chara');
var image = drawRotatedImage(image_chara,0,0,90);

[s.t.]

どのようなエラーでしょうか？
contextがない、とかでしょうか。
このサイトの参考URLにあるソースコードを参考にしてみてもダメでしょうか？

https://github.com/laboradian/rotate-image-on-canvas-sample001/blob/master/src/js/main.js

[退会済みユーザー]

> context.save();でエラーになってしまっているようでした。

そういうことはないと思うのですが。後で検証して結果を回答欄に書いておきます。

[Qoo]

御世話になります。
context.save();のエラーではなかったです。
下記のコードで実行して確認しているのですが、
エラーにはならないものの画像が表示されなくなってしまいます。

var iw = image.naturalWidth, ih = image.naturalHeight;
var width = iw, height = ih;

const image_chara = document.querySelector('#pic_chara');
let image_chara_ratio = image_chara.width / image_chara.height;
dw = width / 4;
dh = width / 4 / image_chara_ratio;
var ctx = canvas[0].getContext('2d');
ctx.save();
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(
image_chara,
0, 0,
image_chara.width, image_chara.height,
width - dw, height - dh,
dw, dh
);
ctx.restore();

何か勘違いしているようなところはありますでしょうか。。

[退会済みユーザー]

定義不明な変数などが入った断片的なコードを見せられてデバッグしろと言われても・・・　そういうの普通の人はやる気が起きないと思いますよ。　回転とかナシなら表示できるのですか？

[Qoo]

申し訳ありません！回転なしなら表示できております。もう少し試行錯誤してみます！

Answer 2

ズブの素人です。
アドバイスをくださいとのことなので、アドバイスです。
間違ってたらすいません。

今あなたに何が起こっているのか？

今あなたは何をしようとしているのか？

ほんとうにやりたいことはなんですか？

Comments

[Qoo]

ありがとうございます！わかりやすいです！
基準点は左上ではなさそうですが、考え方はわかりました！
トライしてみます！