Javascript 在圆内拖动或移动图像（圆周运动）

我在画布上画了一个圆圈，并在边界附近放了一个图像。现在我完全不知道..我想拖动图像围绕圆圈，但箭头图像的顶部应始终位于边界上。 例如：我在九点钟从上向左拖动箭头。现在箭头图像需要旋转90度

canvas=document.getElementById（'test'）； var context=canvas.getContext（“2d”）； var点=[]； var半径=55； imageBG=新图像（）； imageBG.onload=function（）{context.drawImage（imageBG，148100，15，15）；}； imageBG.src=https://www.nanamee.com/upload/images/5945/5945_p.jpg'; 对于（变量度数=0；度数<360；度数++） { var弧度=度*Math.PI/179； var x=150+半径*数学cos（弧度）； 变量y=150+半径*数学正弦（弧度）； push（{x:x，y:y}）； } context.beginPath（）； context.moveTo（点[0].x+4，点[0].y+4） 对于（变量i=1；i

您的浏览器不支持HTML5画布标记。

您需要：

• 按照我们的要求画出你的弧线（除非你对

  lineTo（）

  有更好的计划）
• 计算鼠标在画布上鼠标移动中的位置
• 根据鼠标位置和弧中心计算合成度
• 缓存图像以供重用
• 创建绘制函数（一个用于圆弧，另一个用于在转换画布上下文后绘制图像）。这样，在（单击+拖动）mousemove上，您只需重复使用它们即可将对象绘制到画布中

我不会向您展示如何实现click+drag，因为它非常简单：如果click+MOUSEMOVE都注册了，您只需应用draw函数即可

下面是有趣的计算部分：

var canvas=document.getElementById（'test'）；//存储在变量中！
var context=canvas.getContext（“2d”）；
变量圆={rad:55，x:100，y:100}；//对象以便于使用
var img={src:'//placehold.it/13x13/000'，x:0，y:0，w:13，h:13}；
变量arrowImg；//存储以供以后的图像参考
函数drawArc（）{
context.beginPath（）；
弧（circle.x，circle.y，circle.rad，0，Math.PI*2，true）；
context.strokeStyle=“#000”；
context.lineWidth=1；
stroke（）；
closePath（）；
}
功能图（度）{
context.save（）；//在处理ctx翻译之前保存
context.translate（circle.y，circle.x）；//临时翻译ctx
//到弧中心坐标。
context.rotate（deg*Math.PI/180）；//我们需要弧度，所以deg*Math.PI/180
背景.绘图图像（箭头img，圆圈.rad img.w，-img.h/2）；
context.restore（）；//还原为默认值
}
函数calcDeg（e）{//从鼠标位置与弧中心检索度
var mPos={
x:e.pageX-canvas.offsetLeft circle.x，
y:e.pageY-canvas。偏移圆。y
}; 
var getAtan=Math.atan2（mPos.y，mPos.x）；
返回getAtan*180/Math.PI；
}
drawArc（）；//画弧
箭头img=新图像（）；//创建图像对象
arrowImg.onload=函数（）{drawImg（-90）}；//加载并绘制图像
箭头img.src=img.src；
canvas.addEventListener（“mousemove”，函数（evt）{
canvas.width=canvas.width；//清除画布
drawArc（）；//绘制圆弧
drawImg（calcDeg（evt））；//以计算的度数绘制图像
}，假）
canvas{background:#eee；}
您的浏览器不支持HTML5画布标记。
我不明白的是：为什么不这样做：（使用简单的圆弧）；在画布中侦听鼠标位置的代码在哪里？你的拖拽活动在哪里？数学在哪里？