`drawMain(drawing_elem, percent, forecolor, bgcolor,fillColor) {
/*
@drawing_elem: 繪制對(duì)象
@percent：繪制圓環(huán)百分比, 范圍[0, 100]
@forecolor: 繪制圓環(huán)的前景色，顏色代碼
@bgcolor: 繪制圓環(huán)的背景色，顏色代碼
*/
var context = drawing_elem.getContext('2d')
var center_x = drawing_elem.width / 2;
var center_y = drawing_elem.height / 2;
var rad = Math.PI/3*5/100; //繪制的為300度的圓
// 65 * Math.PI / 180, 115 * Math.PI / 180
// var speed = 0;

// 繪制背景圓圈
function backgroundCircle(){
context.save();
context.beginPath();
context.lineWidth = 8; //設(shè)置線寬
var radius = center_x - context.lineWidth;
context.lineCap = "round";
context.strokeStyle = bgcolor;
context.arc(center_x, center_y, radius,-Math.PI/180*240, Math.PI/180*60, false);
**起點(diǎn)，終點(diǎn)，半徑，開始點(diǎn)，結(jié)束點(diǎn)，是否順/逆時(shí)針**
context.stroke();
context.closePath();
context.restore();
}

//繪制運(yùn)動(dòng)圓環(huán)
function foregroundCircle(n){
context.save();
context.strokeStyle = forecolor;
context.lineWidth = 8;
context.lineCap = "round";
var radius = center_x - context.lineWidth;
// console.log(endAngle)
context.beginPath();
context.arc(center_x, center_y, radius ,-Math.PI/180*240 ,-Math.PI/180*240+n*rad , false); //用于繪制圓弧context.arc(x坐標(biāo)，y坐標(biāo)，半徑，起始角度，終止角度，順時(shí)針/逆時(shí)針)
context.stroke();
context.closePath();
context.restore();
}

//繪制文字
function text(n){
context.save(); //save和restore可以保證樣式屬性只運(yùn)用于該段canvas元素
context.fillStyle = fillColor;
var font_size = 20;
context.font = font_size + "px Helvetica";
var text_width = context.measureText(n.toFixed(0)+"%").width;
context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);
context.restore();
}

//執(zhí)行動(dòng)畫
(function drawFrame(){
// 去掉動(dòng)畫加載效果
// window.requestAnimationFrame(drawFrame);
// context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
backgroundCircle();
text(percent);
foregroundCircle(percent);
**// 去掉動(dòng)畫加載效果，這兩行代碼，由于網(wǎng)速加載慢的時(shí)候繪制的比較慢，動(dòng)態(tài)效果繪制的太緩慢，所以去掉了**
// if(speed >= percent) return;
// speed += 1;
}());
},

this.$nextTick(()=>{
for(var i =0;i<this.couponCenterLists.length;i++) {
this.childrenTag = document.getElementById("time-graph-canvas"+i);
let score = this.couponCenterLists[i].couponPercentage * 100;
this.drawMain(this.childrenTag, score, "#fff", "rgba(255,255,255,0.4)","#fff");
**score變量是我從接口取出來(lái)的數(shù)據(jù)存到了score變量中**
}
})