私はいくつかの画像を表示しているウェブサイトを作成しています。私は多くのウェブサイトを調べましたが、結果はありません。
HTML：
<head></head>
<body onload=init()>
<img id="imgID" src="images/buttons/panda-wall.jpg" alt="panda wall" width="100" height="100"><br></br>
<canvas id="myCanvas" height="400px" width="400px" style="border:1px solid"></canvas>
<button onclick="rotateImage()">Clear canvas</button>
</body>
JavaScript：
function init()
{
var c = document.getElementById("myCanvas");
var context = c.getContext('2d');
var img = document.getElementById("imgID");
context.drawImage(img,0,0,c.width, c.height);
}
function rotateImage()
{
var c = document.getElementById("myCanvas");
var context = c.getContext('2d');
var img = document.getElementById("imgID");
context.save();
// Translate
context.translate(200, 200);
// Scale
context.scale(2,2);
// Rotate it
context.rotate(10*Math.PI/180);
context.translate(-200, -200);
context.drawImage(img,0,0);
// Finally draw the image data from the temp canvas.
context.restore();
}
前もって感謝します。
更新：- 以下の変更で問題を修正しました：
function rotateImage()
{
var c=document.getElementById("myCanvas");
var context = c.getContext('2d');
var img = document.getElementById("imgID");
//clear the context object rectangle.
context.clearRect(0, 0, c.width, c.height);
//Save the context object.
context.save();
// Translate
context.translate(c.width/2, c.height/2);
// Rotate it with 90 degree
context.rotate(90*Math.PI/180);
//Translate the image on the basis of the center of the canvas.
context.translate(-(c.width/2), -(c.height/2));
// Draw the Image.
context.drawImage(img,0,0, c.width,c.height);
// Finally draw the image data from the temp canvas.
context.restore();
}
しかし、それでも、大きな画像（たとえば、幅：800ピクセルと高さ：1280ピクセル）の座標の正確な位置を見つけるのに問題があります。小さな画像（幅：240、高さ：400など）の場合、X座標値とY座標値を取得するために次のロジックを使用しています。
X =（Image.width / canvas.width）* current_mousePosition.X; Y =（Image.height / canvas.height）* current_mousePosition.Y;
ただし、このロジックは、上記のように大きな画像、幅、高さでは失敗します。元の画像に対応する現在のマウス位置の正確な座標を取得するためのロジックを教えてください。すべてのサイズの画像で利用できるデフォルトロジックはありますか？リンクやアイデアの面で、どんな助けでも大歓迎です。前もって感謝します