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

该函数用于绘制围绕画布上的点旋转的旋转图像并偏移到其自身的旋转中心。

// 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 
} 

所以，如果你的形象是50 100个像素，并且希望将图像旋转约在25点吧，80（底部中心附近），并且旋转点是在画布上以200,200然后

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>