getmoveto:function(lx,ly){ if(!this.p.isDown){ //是否可移动 return false; } var tem={}; //存放目标坐标位置 tem.o=Math.atan(ly/lx); //鼠标移动点圆形角 tem.x=this.pathr*Math.cos(tem.o); tem.y=this.pathr*Math.sin(tem.o); if(lx<0){ //坐标点处理（正负） 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; },
（5）以上方法在canvas内任意点均可作为滑块拖动的目标点，这里编写cheack方法，将限制可拖动位置限制在一个大概的环形里
check:function(x,y){ //限制可拖动范围 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; },
5、事件方法编写
（1）鼠标按下执行方法OnMouseDown
这里使用了getx和gety获取光标相对canvas坐标，并判断鼠标是否移动到了滑块上方位置内，（this.p是当前绘图对象，p.x即滑块横坐标，p.x即当前纵坐标，p.r即滑块最大半径），如果光标在滑块上方则设置isDown为TRUE，反正依然，后面我们会通过isDown来判断是否执行移动滑块的方法：
OnMouseDown:function(evt){ var X=this.getx(evt); //获取当前鼠标位置横坐标 var Y=this.gety(evt); //获取当前鼠标位置纵坐标 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){ //判断鼠标是否在滑块上 this.p.isDown=true; }else{ this.p.isDown=false; } }
（2）鼠标按下后移动时滑块的方法：
OnMouseMove:function(evt){ // if(this.p.isDown){ //是否在滑块上按下鼠标 var a={}; //存放当前鼠标坐标 a.x=this.getx(evt); //坐标转化 a.y=this.gety(evt); var b=this.spotchange(a); //坐标转化 var co=this.getmoveto(b.x,b.y); //获取要移动到的坐标点 if(this.check(b.x,b.y)){ //判断移动目标点是否在可拖动范围 var co=this.getmoveto(b.x,b.y); //获取到移动的目标位置坐标（） var tar=this.respotchange(co); //坐标转化 var o=co.z; this.p.draw(tar.x,tar.y,this.p.r,o); //绘图 } } },
（3）鼠标释放方法
OnMouseUp:function(){ //鼠标释放 this.p.isDown=false },
（4）最后将所有方法和事件绑定
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); },
至此可拖动滑块基本方法编写完成