質問編集履歴
2
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -25,10 +25,5 @@
|
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
０度のとき
|
|
28
|
-
|
|
29
|
-
|
|
30
28
|
−１０度のとき
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
＋１０度のとき
|
|
29
|
+
＋１０度のとき
|
|
34
|
-
|
1
試行錯誤している中で質問を変更しました
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,15 +1,34 @@
|
|
|
1
|
-
drawImageを使用して画像を
|
|
1
|
+
drawImageを使用して画像を回転しようとしています。
|
|
2
|
-
|
|
2
|
+
アドバイスいただいたコードで一応回転はしているっぽいことはわかりました。
|
|
3
3
|
|
|
4
|
+
回転させた後、位置を調整すればうまく表示できるのだろうと思うのですが、
|
|
5
|
+
基準点がどこにあるのか理解できずどう調整していいのかアドバイスいただきたく。
|
|
6
|
+
|
|
4
7
|
```JS
|
|
5
|
-
|
|
8
|
+
|
|
6
|
-
|
|
9
|
+
const image_chara = document.querySelector('#pic_chara');
|
|
10
|
+
let image_chara_ratio = image_chara.width / image_chara.height;
|
|
11
|
+
dw = width / 4;
|
|
12
|
+
dh = width / 4 / image_chara_ratio;
|
|
13
|
+
|
|
14
|
+
ctx.save();
|
|
15
|
+
ctx.rotate(10 * Math.PI / 180);
|
|
7
16
|
ctx.drawImage(
|
|
8
|
-
|
|
17
|
+
image_chara,
|
|
9
|
-
|
|
18
|
+
0, 0,
|
|
10
|
-
|
|
19
|
+
image_chara.width, image_chara.height,
|
|
11
|
-
|
|
20
|
+
width - dw, height - dh,
|
|
12
|
-
|
|
21
|
+
dw, dh
|
|
13
|
-
|
|
22
|
+
);
|
|
23
|
+
ctx.restore();
|
|
14
24
|
|
|
15
|
-
```
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
０度のとき
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
−１０度のとき
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
＋１０度のとき
|
|
34
|
+
|