this.cObj.beginPath();
this.cObj.arc(200,200,120,Math.PI*0.75,this.j,false); // 可變圓弧
this.cObj.strokeStyle = '#f15a4a';
this.cObj.lineCap = "round";
this.cObj.lineWidth = 20;
this.cObj.stroke();

getx:function(ev){ //獲取鼠標(biāo)在canvas內(nèi)坐標(biāo)x
 return ev.clientX-this.obj.getBoundingClientRect().left;
 },
 gety:function(ev){ //獲取鼠標(biāo)在canvas內(nèi)坐標(biāo)y
 return ev.clientY-this.obj.getBoundingClientRect().top;
 }

spotchange:function(a){ //屏幕坐標(biāo)轉(zhuǎn)化為中心坐標(biāo) 
 var target={};
 if(a.x<200 && a.y<200){　　　　　　//二象限
 target.x=-(200-a.x); 
 target.y=200-a.y; 
 }else if(a.x>200 && a.y<200){　　//一象限 
 target.x=a.x-200; 
 target.y=200-a.y; 
 }else if(a.x>200 && a.y>200){　　//四象限
 target.x=a.x-200;
 target.y=-(a.y-200) 
 }else if(a.x<200 && a.y>200){　　//三象限
 target.x=-(200-a.x); 
 target.y=-(a.y-200); 
 } 
 return target; 
},

respotchange:function(a){ //中心坐標(biāo)轉(zhuǎn)化為屏幕坐標(biāo)
 var target={};
 if(a.x>0 && a.y>0){
 target.x=200+a.x;
 target.y=(200-a.y);
 }else if(a.x<0 && a.y>0){
 target.x=200+a.x;
 target.y=200-a.y;
 }else if(a.x<0 && a.y<0){
 target.x=200+a.x;
 target.y=-(a.y-200)
 }else if(a.x>0 && a.y<0){
 target.x=200+a.x;
 target.y=-(a.y-200);
 }
 return target;
 },

getmoveto:function(lx,ly){
 if(!this.p.isDown){ //是否可移動(dòng)
 return false;
 }
 var tem={}; //存放目標(biāo)坐標(biāo)位置
 tem.o=Math.atan(ly/lx); //鼠標(biāo)移動(dòng)點(diǎn)圓形角
 tem.x=this.pathr*Math.cos(tem.o);
 tem.y=this.pathr*Math.sin(tem.o);
 if(lx<0){ //坐標(biāo)點(diǎn)處理（正負(fù)）
 tem.x=-tem.x;
 tem.y=-tem.y;
 }
 if(lx>0){ //弧度值處理
 tem.z=-Math.atan(tem.y/tem.x)+Math.PI*2;
 }else{
 tem.z=-Math.atan(tem.y/tem.x)+Math.PI;
 }
 if(tem.z>7.06){ //最大值
 tem.z=7.06;
 tem.x=this.pathr*Math.cos(Math.PI*2.25);
 tem.y=-this.pathr*Math.sin(Math.PI*2.25);
 }
 if(tem.z<2.4){ //最小值
 tem.z=2.4;
 tem.x=this.pathr*Math.cos(Math.PI*0.75);
 tem.y=-this.pathr*Math.sin(Math.PI*0.75);
 }
 return tem;
 },

check:function(x,y){ //限制可拖動(dòng)范圍
 var xx=x*x;
 var yy=y*y;
 var rr=114*114; //最小
 var rrr=126*126; //最大
 if(xx+yy>rr && xx+yy<rrr){
 return true;
 }
 return false;
 },

OnMouseDown:function(evt){
 var X=this.getx(evt); //獲取當(dāng)前鼠標(biāo)位置橫坐標(biāo)
 var Y=this.gety(evt); //獲取當(dāng)前鼠標(biāo)位置縱坐標(biāo)
 var minX=this.p.x-this.p.r; 
 var maxX=this.p.x+this.p.r;
 var minY=this.p.y-this.p.r;
 var maxY=this.p.y+this.p.r;
 if(minX<X && X<maxX && minY<Y && Y<maxY){ //判斷鼠標(biāo)是否在滑塊上 
  this.p.isDown=true; 
 }else{
  this.p.isDown=false;
 }
}

OnMouseMove:function(evt){ //
 if(this.p.isDown){ //是否在滑塊上按下鼠標(biāo)
  var a={};  //存放當(dāng)前鼠標(biāo)坐標(biāo)
  a.x=this.getx(evt); //坐標(biāo)轉(zhuǎn)化
  a.y=this.gety(evt);
  var b=this.spotchange(a); //坐標(biāo)轉(zhuǎn)化
  var co=this.getmoveto(b.x,b.y); //獲取要移動(dòng)到的坐標(biāo)點(diǎn)
  if(this.check(b.x,b.y)){ //判斷移動(dòng)目標(biāo)點(diǎn)是否在可拖動(dòng)范圍
  var co=this.getmoveto(b.x,b.y); //獲取到移動(dòng)的目標(biāo)位置坐標(biāo)（）
  var tar=this.respotchange(co); //坐標(biāo)轉(zhuǎn)化
  var o=co.z;
  this.p.draw(tar.x,tar.y,this.p.r,o); //繪圖
  }
 }
 },

OnMouseUp:function(){ //鼠標(biāo)釋放
 this.p.isDown=false
}, 

event:function(){ //事件綁定
 this.obj.addEventListener("mousedown",this.OnMouseDown.bind(this),false);
 this.obj.addEventListener("mousemove",this.OnMouseMove.bind(this),false);
 this.obj.addEventListener("mouseup",this.OnMouseUp.bind(this),false);
 },