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

滑块效果图

改动百分比效果图

思路

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

        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='#6699FF';
		ctx.arc(0,0,radius,0,move/180*Math.PI);//根据move的大小绘制圆弧
		ctx.stroke();

    在圆弧上绘制一个小圆作为指示器

        //绘制指针小圆
		ctx.save();
		ctx.rotate(move/180*Math.PI);//根据move的大小旋转
		ctx.beginPath();
		ctx.strokeStyle='gray';
		ctx.lineWidth='2';
		ctx.arc(radius,0,11,0,2*Math.PI);
		ctx.fillStyle='white';
		ctx.fill();
		ctx.stroke();
		ctx.restore();

  在圆心出放置一个DIV，可以做为百分比显示器

	

			
			
50
		

设置这个百分比的样式

#percent{
	width: 50px;
    height: 50px;
    position: absolute;
    left: 130px;
    top: 130px;
    font-size: 30px;
    cursor: pointer;
}
#percent input{
	width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #EEEEEE;
    text-align:center;
    font-size: 30px;
}

如何来做到点击

首先给canvas画布添加一个点击事件，当鼠标点击的时候，我们可以得到一个坐标X,Y，根据勾股定理可以算出这个点到圆心的距离，如果在一定的范围呢，则认为是点击到圆弧上，否则不触发。

		//根据勾股定理计算半径
		var conputedRadius = Math.sqrt((e.clientX-tranX)*(e.clientX-tranX)+(e.clientY-tranY)*(e.clientY-tranY));
		//处于90-110的被认为是有效点击
		if(conputedRadius>90 && conputedRadius<110){//点击的有效性
			//计算角度
	    	var jiaodu=Math.round(Math.asin((e.clientY-tranY)/conputedRadius)/Math.PI*180);//asin
			var jiaodu1=Math.round(Math.acos((e.clientX-tranX)/conputedRadius)/Math.PI*180);//acos
			var jiaodu2 = jiaodu>0?jiaodu1:(360-jiaodu1);	//最终角度
			
			//因为已经逆时针旋转了180度，所以还要处理
			jiaodu2 = jiaodu2<180?(jiaodu2+180):(jiaodu2-180);
		
			end=jiaodu2;//最终计算的鼠标点击位置的正真角度
			
			//显示指数
			percent.children[1].innerText=Math.round(end/360*100);
			percent.children[0].value=Math.round(end/360*100);
			//执行动画
			doAnimate();
		}else{
			return;
		}

完整代码

	
		
		
		
	
	
		
		

			
			
50
		
	
	

给个三连吧兄弟们！