音量调节器 html5 js

为什么80%的码农都做不了架构师？>>>   

// JavaScript Document
function circular (){};
    circular.prototype={
    bigbigCanvas:"",
    centerCanvas:"",
    ballCanvas:"",
    bigArcPointRad:0,
    centerArcPointRad:0,
    ballArcPointRad:0,
    parent:0,
    initParent:function(parents){
        this.parent = $("#"+parents)[0];
    },
    initObj:function(){
       
         this.bigCanvas = document.createElement("CANVAS");
         $(this.bigCanvas).attr("style","position:absolute;");
         this.centerCanvas =$(this.bigCanvas).clone()[0];
         this.ballCanvas = $(this.bigCanvas).clone()[0];
       
         $(this.parent).append(this.bigCanvas);
         $(this.parent).append(this.centerCanvas);
         $(this.parent).append(this.ballCanvas);
    },
    initRad:function(a,b,c){
        this.bigArcPointRad= a;
        this.centerArcPointRad = b;
        this.ballArcPointRad = c;
    },
   
    drawCircular:function(callBack){
        this.postion(callBack);
        if (this.bigCanvas.getContext){
             var bigCtx = this.bigCanvas.getContext('2d');
             bigCtx.fillStyle = '#009';
            // bigCtx.strokeStyle = '#f00';
             bigCtx.beginPath();
             bigCtx.arc(this.bigArcPointRad+1,this.bigArcPointRad+1,this.bigArcPointRad,0,Math.PI*2, true);  // 绘制一条圆弧线
             bigCtx.closePath();    // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条圆弧
             bigCtx.fill();      // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
             bigCtx.stroke();
            //===============================================================心圆
             var centerCtx = this.centerCanvas.getContext('2d');
             centerCtx.fillStyle = '#000';
            // centerCtx.strokeStyle = '#f00';
             centerCtx.beginPath();
             centerCtx.arc(this.centerArcPointRad+1,this.centerArcPointRad+1,this.centerArcPointRad,0,Math.PI*2, true); // 绘制一条圆弧线
             centerCtx.closePath();    // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条圆弧
             centerCtx.fill();      // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
             centerCtx.stroke(); 
             //================================================================滚轴
             var ballCtx = this.ballCanvas.getContext('2d');
             ballCtx.fillStyle = '#090';
            // ballCtx.strokeStyle = '#f00';
             ballCtx.beginPath();
             ballCtx.arc(this.ballArcPointRad+1,this.ballArcPointRad+1,this.ballArcPointRad,0,Math.PI*2, true); // 绘制一条圆弧线
             ballCtx.closePath();    // 自动绘制一条直线来关闭弧线。若不调用此方法，将仅仅显示一条半圆弧
             ballCtx.fill();      // 可以尝试注释掉 fill 或者 stroke 函数，观察图形的变化
             ballCtx.stroke();
           
        }
    },
    postion:function(callBack){
        $(this.bigCanvas).attr("width",this.bigArcPointRad*2+2);
        $(this.bigCanvas).attr("height",this.bigArcPointRad*2+2);
        $(this.centerCanvas).attr("width",this.centerArcPointRad*2+2);
        $(this.centerCanvas).attr("height",this.centerArcPointRad*2+2);
        var centerArcPointX = this.bigArcPointRad-this.centerArcPointRad;
        var centerArcPointY = this.bigArcPointRad-this.centerArcPointRad;
        this.centerCanvas.style.top=centerArcPointY+"px";
        this.centerCanvas.style.left=centerArcPointX+"px";
        $(this.ballCanvas).attr("width",this.ballArcPointRad*2+2);
        $(this.ballCanvas).attr("height",this.ballArcPointRad*2+2);
        var ballArcPointX = this.bigArcPointRad+this.centerArcPointRad;
        var ballArcPointY = this.bigArcPointRad-this.ballArcPointRad;
        this.ballCanvas.style.top=ballArcPointY+"px";
        this.ballCanvas.style.left=ballArcPointX+"px";
       
       
        var ballArcPointXY = this.centerArcPointRad+this.ballArcPointRad;
        var balls = this.ballCanvas;
        var bigArcRad = this.bigArcPointRad;
        var ballArcRad = this.ballArcPointRad;
       
        var srcX = balls.style.left.split("px")[0] - bigArcRad+this.ballArcPointRad;
        var    srcaixsY = Math.acos(srcX/ballArcPointXY);
       
       
        this.ballCanvas.ontouchmove=function(e){
                var nowX =  e.touches[0].pageX;
                 var nowY =  e.touches[0].pageY;
                 nowX = nowX-balls.parentNode.offsetLeft - bigArcRad;
                 nowY = nowY-balls.parentNode.offsetTop - bigArcRad;
                 var nowR=Math.sqrt(nowY*nowY+nowX*nowX);
                        aixsX = Math.asin(nowY/nowR);
                        aixsY = Math.acos(nowX/nowR);
                        if(Math.abs(srcaixsY-aixsY)<0.5&&srcaixsY-aixsY!=0){
                           
                            var maxs = Math.PI/2;
                            if(aixsX>0&&aixsX<maxs&&aixsY>0&&aixsY<maxs){
                                srcaixsY<0.5?(aixsX=aixsY=0):(aixsX=aixsY=maxs);
                            }
                            var info={y:aixsY,x:aixsX};
                                nowY = ballArcPointXY*Math.sin(aixsX);
                                nowX = ballArcPointXY*Math.cos(aixsY);
                                balls.style.left = nowX + bigArcRad-ballArcRad + "px";
                                balls.style.top  = nowY + bigArcRad -ballArcRad + "px";   
                                callBack(info);
                                srcaixsY = aixsY;
                        }
                e.preventDefault();
        }
       
    }
};


       

转载于:https://my.oschina.net/devGuo/blog/17033