html5调节系统声音,音量调节器 html5 js

// 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&&aixsX0&&aixsY

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();

}

}

};