Javascript 如何通过画布创建圆形搜索栏

我想创建一个圆形的玩家搜索栏。我必须有两个把手。一个是缓冲部分（图片中的灰色）不可拖动，另一个是更多可拖动的项目，指示正在播放的歌曲的当前部分。我不知道如何才能做到这一点。看起来帆布是最好的选择。但我不确定物品是否可以在画布上拖动

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 100;

context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.lineWidth = 25;
context.strokeStyle = '#003300';
context.stroke();

有什么想法或例子来实现它吗

---

圆圈控制

这个答案展示了如何创建游戏类型控件。它以固定的时间间隔运行，并且每个时间间隔渲染一次。它不是事件驱动的，鼠标事件不调用控件，控件只检查当前鼠标位置。如果间隔低于鼠标事件间隔，则会丢失一些鼠标移动，但控件也会正常工作

通过创建自己的鼠标事件监听器并在需要时调用

update

和

draw（）。警告：此控件使用自定义鼠标对象更改光标并管理哪个控件拥有鼠标的所有权。鼠标需要所有权，这样当您将一个控制柄拖动到另一个控制柄上时，就不会开始拖动另一个控制柄。它通过将
mouse.mousePrivate
值设置为控件的唯一ID工作。如果
mouse.mousePrivate
不等于
0
（无所有者）或控件的ID，则控件将忽略鼠标

有关其工作原理，请参见代码。演示显示了几个显示不同行为的控件。centra控件是一个从0到100的简单范围控件，左上角的控件有10个旋转，范围从0到1000，并显示两个位置圆弧以显示位置。右上角控件有一个浮动值，即如果您正在搜索视频，则搜索位置不会立即响应，因此控件有一个浮动值，该值显示位置弧作为实际位置，而数字和拨号手柄显示实际位置

这只是一个例子，你应该拿你想要的。它没有在多个浏览器上进行过测试，除了最基本的测试之外也没有其他测试，所以不要按原样使用它


demo=function（）{
/**fullScreenCanvas.js开始**/
var canvas=（函数（）{
var canvas=document.getElementById（“canv”）；
如果（画布！==null）{
document.body.removeChild（画布）；
}
//创建具有二维上下文的空白图像
canvas=document.createElement（“canvas”）；
canvas.id=“canv”；
canvas.style.background=“#AAA”；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
canvas.style.position=“绝对”；
canvas.style.top=“0px”；
canvas.style.left=“0px”；
canvas.style.zIndex=1000；
canvas.ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
返回画布；
})();
var ctx=canvas.ctx；
/**fullScreenCanvas.js结束**/
/**mouseovell.js begin**/
var canvasMouseCallBack=未定义；//如果需要
var mouse=（函数（）{
功能游标控制（游标）{
if（游标！==此.lastCursor）{
如果（光标！=“默认”）{
this.lastCursor=游标；
}
}
}
函数更新（）{
if（this.element！==未定义）{
this.element.style.cursor=this.lastCursor；
this.lastCursor=“default”；
}
}
变量鼠标={
x:0，y:0，w:0，alt:false，shift:false，ctrl:false，
界面ID:1，按钮箭头：0，按钮箭头：0，
over:false，//鼠标位于元素上方
bm:[1,2,4,6,5,3]，//用于设置和清除按钮原始位的掩码；
getInterfaceId:function（）{返回this.interfaceId++；}，//用于UI函数
鼠标驱动：0，
lastCursor：“默认值”，
setCursor:cursorControl，
frameEnd:更新，
startMouse:未定义，
元素：未定义，
};
函数mouseMove（e）{
var t=e.type，m=mouse；
m、 x=e.offsetX；m.y=e.offsetY；
如果（m.x===未定义）{m.x=e.clientX；m.y=e.clientY；}
m、 alt=e.altKey；m.shift=e.shiftKey；m.ctrl=e.ctrlKey；
如果（t==“mousedown”）{m.buttonRaw |=m.bm[e.which-1]；
}如果（t==“mouseup”）{m.buttonRaw&=m.bm[e.which+2]；
}如果（t==“mouseout”）{m.buttonRaw=0；m.over=false；
}else如果（t==“mouseover”）{m.over=true；
}如果（t==“鼠标轮”）{m.w=e.wheelDelta；
}else如果（t==“DOMMouseScroll”）{m.w=-e.detail；}
if（canvasMouseCallBack）{canvasMouseCallBack（m.x，m.y）；}
e、 预防默认值（）；
}
功能启动模块（元件）{
如果（元素===未定义）{
元素=文件；
}
mouse.element=元素；
“mousemove，mousedown，mouseup，mouseout，mouseover，mouseweel，DOMMouseScroll”。拆分（“，”）。forEach(
函数（n）{element.addEventListener（n，mouseMove）；}）；
addEventListener（“上下文菜单”，函数（e）{e.preventDefault（）；}，false）；
}
mouse.mouseStart=startMouse；
返回鼠标；
})();
if（画布类型！=“未定义”）{
mouse.mouseStart（画布）；
}否则{
mouse.mouseStart（）；
}
/**mouseovell.js结束**/
/**ImageTools.js开始**/
var imageTools=（函数（）{
var iT={
canvas:function（w，h）{var c=document.createElement（“canvas”）；c.width=w；c.height=h；返回c；}，
createImage:function（w，h）{var i=iT.canvas（w