滑块效果图
改动百分比效果图

思路
首先绘制一个灰色边框的圆
ctx.translate(150,150);//坐标定位至150,150处
ctx.beginPath();
ctx.lineWidth='20';
ctx.strokeStyle='#EEEEEE';
ctx.arc(0,0,radius,0,2*Math.PI);//绘制一个完整的圆
ctx.stroke();
再绘制一个半径一样、圆心一样蓝色的圆
ctx.beginPath();
ctx.rotate(-Math.PI);//逆时针选择一个π
ctx.lineWidth='20';
ctx.strokeStyle='#6699F

这篇博客介绍了一种用JavaScript创建圆形滑块的方法,包括绘制灰色边框的圆、蓝色填充圆、指示器小圆以及百分比显示器。通过监听canvas点击事件,计算点击位置与圆心距离,实现点击圆弧上的交互。提供了完整代码示例。

订阅专栏 解锁全文
752

被折叠的 条评论
为什么被折叠?



