一个非常漂亮的圆形滑块Round Slider，可修改成圆形进度条！

最新推荐文章于 2024-05-25 09:30:38 发布

编程界小明哥

最新推荐文章于 2024-05-25 09:30:38 发布

阅读量4.5k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： javascript canvas javascript精彩实例文章标签： javascript

本文链接：https://blog.youkuaiyun.com/dkm123456/article/details/112954313

javascript精彩实例同时被 3 个专栏收录

24 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

javascript

78 篇文章

订阅专栏

canvas

42 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

滑块效果图

改动百分比效果图

思路

首先绘制一个灰色边框的圆

        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

了解本专栏

超级会员免费看