Javascript Canvas回転円のイメージ

Question

私は助けが必要です、私はポインタである私のイメージを回転しようとしています。それ以下のコードでは回転しますが、私が望むようには回転しません。

コード：

var c = document.getElementById("ctx"); 
    var ctx = c.getContext("2d"); 
    for (var d = 0; d < 360; d++) { 
     setTimeout(function (d) { 
      c.globalAlpha = 0.5; 
      ctx.clearRect(0, 0, c.width, c.height); 
      ctx.save(); 
      ctx.translate(c.width/2, c.height/2); 
      ctx.rotate(d * Math.PI/180); 
      ctx.drawImage(imageLoader.pointer, -imageLoader.pointer.width/2, -imageLoader.pointer.height/2); 
      ctx.restore(); 
     }, 100 * d, d); 
    } 

このコードでは、私のイメージは、私はそれが自転と思いますが、私はわからない変なふうに回転させることができます。

しかし、この画像のような回転が必要です。

私は、この回転は円の周りだと思う、私は誰かが私にヒントを与えるか、私を助けることができ、このようなものが必要？

私は形状でやってみようとしていましたが、そのように回転させるために接線と幾何学的な公式を見つける必要があるので、もっと難しいです。

お時間をいただき、ありがとうございます。

Answer 1

キャンバス上の点を中心に回転し、回転中心にオフセットされた回転イメージを描画する機能です。あなたのイメージは100個のピクセルで50であり、あなたは画像が25で、その上の点を中心に回転するようにしたい場合は

// x,y is the location on the canvas that the image will rotate around 
// cx,cy is the coordinates on the image that is rotated around 
// angle is the amount of rotation in radians 
function drawImage(image,x,y,cx,cy,angle){ 
    ctx.setTransform(1,0,0,1,x,y); // set the rotation origin 
    ctx.rotate(angle); // rotate 
    ctx.drawImage(image,-cx,-cy); // draw image offset to put cx,cy at the point of rotation 
    ctx.setTransform(1,0,0,1,0,0); // restore the transform 
} 

だから、80（底部近傍中央）とその回転ポイントは、200200

でキャンバス上に存在します

drawImage(image,200,200,25,80,3); //rotate 3 radians 

アニメーションでそうすること。

// assumes image has loaded and ctx is the context of the canvas. 
requestAnimationFrame(mainLoop); // starts the animation 
function mainLoop(time){ // time is passed by requestAnimationFrame 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); // clear 
    drawImage(image,200,200,25,80,(time/5000) * Math.PI * 2); // rotate one every 5 seconds 
    requestAnimationFrame(mainLoop); 
} 

const image = new Image 
 
image.src = "https://i.stack.imgur.com/C7qq2.png?s=328&g=1"; 
 
const ctx = myCanvas.getContext("2d"); 
 

 
function drawImage(image,x,y,cx,cy,angle){ 
 
    ctx.setTransform(1,0,0,1,x,y); // set the rotation origin 
 
    ctx.rotate(angle); // rotate 
 
    ctx.drawImage(image,-cx,-cy); // draw image offset to put cx,cy at the point of rotation 
 
    ctx.setTransform(1,0,0,1,0,0); // restore the transform 
 
} 
 

 

 
// assumes image has loaded and ctx is the context of the canvas. 
 
requestAnimationFrame(mainLoop); // starts the animation 
 
function mainLoop(time){ // time is passed by requestAnimationFrame 
 
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); // clear 
 
    if(image.complete){ 
 
     drawImage(image,250,250,image.width/2,image.height * 0.8,(time/5000) * Math.PI * 2); // rotate one every 5 seconds 
 
    } 
 
    requestAnimationFrame(mainLoop); 
 
}

canvas { 
 
    border : 2px black solid; 
 
}

<canvas id="myCanvas" width = 500 height = 500></canvas>