Html5 canvas 如何围绕固定点旋转精灵，使其跟随光标

我正在开发一款小型高尔夫游戏，用户可以通过移动光标来设定角度，所施加的力等于箭头的长度（当光标更靠近球时，力会更小）。您可以在此处查看其工作原理：

我已经知道了如何旋转箭头精灵来跟随光标，但我还不知道如何使它围绕球移动，现在它只是在它的锚中旋转，在这个例子中是箭头的头部

---

我正在使用Panda.js（一个基于Pixi.js的框架）来开发这个游戏，但是它的API与本机Canvas函数类似。我不需要一个精确的实现（这就是为什么我不发布任何代码），但我想了解一些关于如何在给定半径内围绕一个点旋转精灵的想法。在这种情况下，点将是球的中心，半径将是球的半径。谢谢

使用

ctx.translate

或

ctx.setTransform

设置旋转点，然后使用

ctx.rotate（ang）应用旋转然后绘制图像偏移，使旋转点位于（0,0）。即如果希望旋转点位于图像坐标（100,50），则在
ctx.drawImage（图像，-100，-50）处渲染

要获得从点到鼠标的角度，请使用
Math.atan2


requestAnimationFrame（更新）；
//在x、y方向绘制旋转图像。
//cx，cy是您希望其旋转的图像坐标
函数drawSprite（图像、x、y、cx、cy、旋转）{
setTransform（1,0,0,1,x,y）；
ctx.旋转（旋转）；
ctx.drawImage（image，-cx，-cy）；
setTransform（1,0,0,1,0,0）；//还原默认值
}
//函数获取从点到鼠标的方向并绘制图像
//旋转以指向鼠标
函数rotateAroundPoint（x、y、鼠标）{
const dx=鼠标.x-x；
const dy=mouse.y-y；
常数dir=数学atan2（dy，dx）；
drawSprite（箭头、x、y、144、64、dir）；
}
//主动画循环。
功能更新（计时器）{
全局时间=计时器；
setTransform（1,0,0,1,0,0）；//重置转换
ctx.globalAlpha=1；//重置alpha
ctx.clearRect（0，0，w，h）；
冲程圈（150,75,10）；
旋转边界点（150,75，鼠标）；
requestAnimationFrame（更新）；
}
//=====================================================
//其余的都与答案无关。
const ctx=canvas.getContext（“2d”）；
常量鼠标={x:0，y:0，按钮：false}；
[“向下”、“向上”、“移动”].forEach（name=>document.addEventListener（“mouse”+name，mouseEvents））；
功能鼠标事件（e）{
mouse.bounds=canvas.getBoundingClientRect（）；
mouse.x=e.pageX-mouse.bounds.left-scrollX；
mouse.y=e.pageY-mouse.bounds.top-scrollY；
mouse.button=e.type==“mousedown”？true:e.type==“mouseup”？false:mouse.button；
}
const CImage=（w=128，h=w）=>（c=document.createElement（“画布”），c.width=w，c.height=h，c）；
const CImageCtx=（w=128，h=w）=>（c=CImage（w，h），c.ctx=c.getContext（“2d”），c）；
constdrawpath=（ctx，p）=>{vari=0；而（i{if（l.p1）{c=y；r=leng（l）；y=l.p1.y；l=l.p1.x}如果（l.x）{c=r；r=y；y=l.y；l=l.x}c.beginPath（）；c.arc（l，y，r，0，Math.PI*2）；c.stroke（）；
警司=10；
常数aH=20；
常数ind=5；
常量箭头=CImageCtx（）；
arrow.ctx.beginPath（）；
绘图路径（arrow.ctx[
印第安纳州，64-aW，
128-ind-aH，64-aW，
128-ind-aH，64-aH，
128-ind，64，
128-ind-aH，64+aH，
128-ind-aH，64+aW，
印第安纳州，64+aW，
]);
arrow.ctx.fillStyle=“红色”；
arrow.ctx.fill（）；
ctx.strokeStyle=“黑色”；
ctx.lineWidth=2；
var w=画布宽度；
var h=画布高度；
var cw=w/2；//居中
var-ch=h/2；
球形变种
画布{
边框：2件纯黑；
}