window.onload=function() {
//圓環(huán)對象
functionCycle(opts) {
this.id=opts.id;
this.width=opts.width;
this.border=opts.border;
this.height=opts.height;
this.bgcolor=opts.bgcolor;
this.pcolor=opts.pcolor;
this.textcolor=opts.textcolor;
this.percent=opts.percent;
};
//動態(tài)擴(kuò)展內(nèi)置方法
Cycle.prototype={
constructor: Cycle,//聲明指向構(gòu)造器
init:function() {
//創(chuàng)建畫布對象
varhtml="";
document.getElementById(this.id).innerHTML=html;
//初始化事件和參數(shù)
this.setOptions();
//setTimeout(that.setOptions(), 25);
},
//設(shè)置參數(shù)
setOptions:function() {
//獲取畫布對象
varcanvas=document.getElementById("canvas_"+this.id);
//獲取畫布的上下文
varcontext=canvas.getContext("2d");
varw=this.width;
varh=this.height;
vardeg=this.percent;
varcradius=w/2-this.border;
//清除畫布
context.clearRect(0,0, w, h);
//開始繪畫
context.beginPath();
//設(shè)置圓的邊框
context.lineWidth=this.border;
//繪制邊框的顏色
context.strokeStyle=this.bgcolor;//實(shí)心用fillstyle對應(yīng)的方法是fill()
//繪制圓
context.arc(w/ 2, h /2, cradius,0.7*Math.PI,0.3*Math.PI,false);
//加入圓帽
context.lineCap="round";
//繪制到畫板中
context.stroke();
//計算一個角度對應(yīng)弧度是多少
vard=deg*3.6/180*Math.PI;
//重新繪制
context.beginPath();
//設(shè)置圓的邊框
context.lineWidth=this.border;
//繪制邊框的顏色
context.strokeStyle=this.pcolor;
//繪制圓
context.arc(w/ 2, h /2, cradius,-Math.PI/ 0.7, d - Math.PI /0.7);
//創(chuàng)建一個線性漸變
vargradient=context.createLinearGradient(0,100,100,10);
//定義綠色漸變色
gradient.addColorStop(0,"#3fccc7");
//定義藍(lán)色漸變色
gradient.addColorStop(1,"#3fcc9f");
//設(shè)置fillStyle為當(dāng)前的漸變對象
context.strokeStyle=gradient;
//繪制到畫板中
context.stroke();
context.closePath();
//重新繪制
context.beginPath();
//設(shè)置圓的邊框
context.lineWidth='10';
//繪制邊框的顏色
context.strokeStyle='#FFFFFF';
//繪制圓
context.arc(w/ 2, h /2, cradius,d-Math.PI/ 0.7-0.001, d - Math.PI /0.7);
//設(shè)置fillStyle為當(dāng)前的漸變對象
context.strokeStyle='#FFFFFF';
//繪制到畫板中
context.stroke();
context.closePath();
//文字
context.beginPath();
//字體顏色
context.fillStyle=this.textcolor;
//字體樣式
context.font="28px 微軟雅黑"
var text=deg+"%";
//獲取文字寬度
vartextWidth=context.measureText(text).width;
//繪制文字fillText("百分比",x,y);
context.fillText(text, w/ 2 - textWidth /2, h/2+14);
context.closePath();
context.restore();
}
};
newCycle({
id:"cycle1",
width:240,//寬度
height:240,//高度
border:20,//邊框
percent:80,//百分比
bgcolor:"#e5f1fd",//背景顏色
pcolor:"pink",//邊框顏色
textcolor:"#111"http://字體顏色
}).init();
};
