回答編集履歴
2
コード修正
answer
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
まず、Canvasで画像を拡大縮小する方法についてですが、`drawImage()`だけでできます。
|
|
2
2
|
|
|
3
3
|
```js
|
|
4
|
-
/* drawImage(コピー元 X, コピー元 Y, コピー元 Width, コピー元 Height,
|
|
4
|
+
/* drawImage(Image, コピー元 X, コピー元 Y, コピー元 Width, コピー元 Height,
|
|
5
|
-
*
|
|
5
|
+
* コピー先 X, コピー先 Y, コピー先 Width, コピー先 Height);
|
|
6
6
|
*/
|
|
7
|
-
context.drawImage(0, 0, img.width, img.height,
|
|
7
|
+
context.drawImage(img, 0, 0, img.width, img.height,
|
|
8
|
-
|
|
8
|
+
0, 0, img.width * scale, img.height * scale);
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
その上で、画像の描画位置を中央にすればよいので、以下のようになります。
|
1
コード修正
answer
CHANGED
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
const scale = Number(e.target.value);
|
|
21
21
|
// 再描画
|
|
22
22
|
ctx.drawImage(img, 0, 0, img.width, img.height,
|
|
23
|
-
(
|
|
23
|
+
(canvas.width - img.width * scale) / 2,
|
|
24
|
-
(
|
|
24
|
+
(canvas.height - img.height * scale) / 2,
|
|
25
25
|
img.width * scale, img.height * scale);
|
|
26
26
|
});
|
|
27
27
|
```
|