JavaScriptcanvas實(shí)現(xiàn)環(huán)形漸變進(jìn)度條

第JavaScriptcanvas實(shí)現(xiàn)環(huán)形漸變進(jìn)度條functiongradientColor(startColor,endColor,step){

startRGB=this.colorRgb(startColor);//轉(zhuǎn)換為rgb數(shù)組模式

startR=startRGB[0];

startG=startRGB[1];

startB=startRGB[2];

endRGB=this.colorRgb(endColor);

endR=endRGB[0];

endG=endRGB[1];

endB=endRGB[2];

sR=(endR-startR)/step;//總差值

sG=(endG-startG)/step;

sB=(endB-startB)/step;

varcolorArr=[];

for(vari=0;istep;i++){

//計(jì)算每一步的hex值

varhex=this.colorHex('rgb('+parseInt((sR*i+startR))+','+parseInt((sG*i+startG))+','+parseInt((sB*i+startB))+')');

colorArr.push(hex);

}

returncolorArr;

}

//將hex表示方式轉(zhuǎn)換為rgb表示方式(這里返回rgb數(shù)組模式)

gradientCtotype.colorRgb=function(sColor){

varreg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

varsColor=sColor.toLowerCase();

if(sColorreg.test(sColor)){

if(sColor.length===4){

varsColorNew="#";

for(vari=1;ii+=1){

sColorNew+=sColor.slice(i,i+1).concat(sColor.slice(i,i+1));

}

sColor=sColorNew;

}

//處理六位的顏色值

varsColorChange=[];

for(vari=1;ii+=2){

sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));

}

returnsColorChange;

}else{

returnsColor;

}

};

//將rgb表示方式轉(zhuǎn)換為hex表示方式

gradientCtotype.colorHex=function(rgb){

var_this=rgb;

varreg=/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;

if(/^(rgb|RGB)/.test(_this)){

varaColor=_this.replace(/(:(|)|rgb|RGB)*/g,"").split(",");

varstrHex="#";

for(vari=0;iaColor.length;i++){

varhex=Number(aColor[i]).toString(16);

hex=hex100+''+hex:hex;//保證每個(gè)rgb的值為2位

if(hex==="0"){

hex+=hex;

}

strHex+=hex;

}

if(strHex.length!==7){

strHex=_this;

}

returnstrHex;

}elseif(reg.test(_this)){

varaNum=_this.replace(/#/,"").split("");

if(aNum.length===6){

return_this;

}elseif(aNum.length===3){

varnumHex="#";

for(vari=0;iaNum.length;i+=1){

numHex+=(aNum[i]+aNum[i]);

}

retur