JavaScriptで回転した画像を表示させるには以下のようにします。
CSSのtransformを操作する方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>画像を回転させるサンプル</title> <style> body { background-color: black; } </style> </head> <body> <img id="img" src="image.png" /> <script> let $img = document.getElementById("img"); $img.style.transform = "rotate(" + 30 + "deg)"; </script> </body> </html> |
canvasに描画した画像を回転させる
canvasに描画した画像を回転させたい場合は以下のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>画像を回転させるサンプル</title> </head> <body> <canvas id ="can"></canvas> <script> let $can = document.getElementById('can'); $can.width = 400; $can.height = 300; let ctx = $can.getContext("2d"); let image = new Image(); image.src = './image.png'; let imageWidth = 144; let imageHeight = 144; ctx.fillStyle = '#000'; ctx.fillRect(0,0,$can.width, $can.height); ctx.save() ; ctx.translate( imageWidth / 2, imageHeight / 2 ) ; ctx.rotate( 20 * Math.PI / 180 ) ; ctx.translate( -imageWidth / 2, -imageHeight / 2 ) ; ctx.drawImage(image, 0, 0, imageWidth, imageHeight); ctx.restore(); </script> </body> </html> |
rotate()で回転させる時、基準点はCanvas座標の左上が (0, 0)となっています。そのため回転の中心を画像の中心にしたい場合はtranslate()を利用し回転の中心となる基準点を任意の場所へ移動してからrotate()を実行します。
以下は上記のコードでtranslate()やrotate()を実行したときにそのつど矩形を描画したものです。
これだとtranslate()やrotate()を実行したときにどのような処理が行なわれているのかがよくわかります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>矩形を回転させるサンプル</title> </head> <body> <canvas id ="can"></canvas> <script> let $can = document.getElementById('can'); $can.width = 400; $can.height = 300; let ctx = $can.getContext("2d"); let image = new Image(); image.src = './image.png'; let rectWidth = 200; let rectHeight = 100; ctx.fillStyle = '#000'; ctx.fillRect(0,0,$can.width, $can.height); ctx.strokeStyle = '#fff'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.save() ; ctx.translate( rectWidth / 2, rectHeight / 2 ) ; ctx.strokeStyle = '#0f0'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.rotate( 20 * Math.PI / 180 ) ; ctx.strokeStyle = '#00f'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.translate( -rectWidth / 2, -rectHeight / 2 ) ; ctx.strokeStyle = '#f00'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.restore(); </script> </body> </html> |
任意の場所で回転させたい
では回転させた画像を任意の場所に移動させたいときにはどうすればいいのでしょうか？
下記のように上記の処理をおこなう前にtranslate()を実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>回転させた矩形を別の場所に描画するサンプル</title> </head> <body> <canvas id ="can"></canvas> <script> let $can = document.getElementById('can'); $can.width = 400; $can.height = 300; let ctx = $can.getContext("2d"); let image = new Image(); image.src = './image.png'; let rectWidth = 150; let rectHeight = 100; ctx.fillStyle = '#000'; ctx.fillRect(0,0,$can.width, $can.height); ctx.strokeStyle = '#fff'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.save() ; let x = 200; // (200, 100)を中心に20度回転させたい let y = 100; ctx.translate(x - rectWidth / 2, y - rectHeight / 2); ctx.strokeStyle = '#ff0'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.translate( rectWidth / 2, rectHeight / 2 ) ; ctx.strokeStyle = '#0f0'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.rotate( 20 * Math.PI / 180 ) ; ctx.strokeStyle = '#00f'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.translate( -rectWidth / 2, -rectHeight / 2 ) ; ctx.strokeStyle = '#f00'; ctx.strokeRect(0,0,rectWidth, rectHeight); ctx.restore(); </script> </body> </html> |
画像を回転させ続けます。またキーを押下することで画像の表示位置も変更できるようにしました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>画像を回転させるサンプル</title> </head> <body> <canvas id ="can"></canvas> <div id="info"></div> <script> let $can = document.getElementById('can'); $can.width = 400; $can.height = 300; let ctx = $can.getContext("2d"); let image = new Image(); image.src = './image.png'; let imageWidth = 144; let imageHeight = 144; let left = false; let right = false; let up = false; let down = false; let x = $can.width / 2; let y = $can.height / 2; document.onkeydown = function(ev){ if(ev.code == 'ArrowLeft') left = true; if(ev.code == 'ArrowRight') right = true; if(ev.code == 'ArrowUp') up = true; if(ev.code == 'ArrowDown') down = true; } document.onkeyup = function(ev){ if(ev.code == 'ArrowLeft') left = false; if(ev.code == 'ArrowRight') right = false; if(ev.code == 'ArrowUp') up = false; if(ev.code == 'ArrowDown') down = false; } let angle = 0; setInterval(() => { angle += 4; if(left) x -= 4; if(right) x += 4; if(up) y -= 4; if(down) y += 4; ctx.fillStyle = '#000'; ctx.fillRect(0,0,$can.width, $can.height); ctx.save() ; ctx.translate(x - imageWidth / 2, y - imageHeight / 2); ctx.translate( imageWidth / 2, imageHeight / 2 ) ; ctx.rotate( angle * Math.PI / 180 ) ; ctx.translate( -imageWidth / 2, -imageHeight / 2 ) ; ctx.drawImage(image, 0, 0, imageWidth, imageHeight); ctx.restore(); document.getElementById('info').innerText = `X = ${x} Y = ${y} 角度 = ${angle % 360}`; }, 33); </script> </body> </html> |
