//1、封装在utils中

//底圆条

function floorCir(obj={}){  //参数为obj对象

let id=obj.id?obj.id:null;

let x = obj.x?obj.x:null;

let y = obj.y?obj.y:null;

let radius = obj.radius?obj.radius:null;

var cxt_arc = wx.createCanvasContext(id);  //寻找id---注意id不要重复

cxt_arc.setLineWidth(6);

cxt_arc.setStrokeStyle('#ECECEC');

cxt_arc.setLineCap('round');

cxt_arc.beginPath();

cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false);

cxt_arc.stroke();

cxt_arc.draw();

}

/**圆形进度条封装 */

function drawCircle(obj={}){

let evl = obj.evl?obj.evl:null;

let id = obj.id?obj.id:null;

let x = obj.x?obj.x:null;

let y=obj.y?obj.y:null;

let radius=obj.radius?obj.radius:null;

var crore=evl;  //动态生成的分数画圆

let ctx = wx.createCanvasContext(id,this)  //一定加this

if(varName){

clearInterval(varName);

varName = null;

}

function drawArc(s, e) {

// console.log(s);

ctx.setFillStyle('white');

ctx.clearRect(0, 0, 120, 120);

ctx.draw();

// var x = 60, y = 60, radius = 50;

/**设置渐变 */

var gradient = ctx.createLinearGradient(200, 100, 100, 200);

gradient.addColorStop("0", "#7CF8BA");

gradient.addColorStop("0.7", "#35B3FF");

gradient.addColorStop("1.0", "#7CF8BA");

ctx.setLineWidth(6); //进度条宽度

ctx.setStrokeStyle(gradient);

ctx.setLineCap('round');

ctx.beginPath();

ctx.arc(x, y, radius, s, e, false);

ctx.stroke()

ctx.draw()

}

var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0;

var animation_interval = 60, n = crore;

var animation = function () {

if (step <= n) {

endAngle = step * 2 * Math.PI / 100 + 1.5 * Math.PI;

drawArc(startAngle, endAngle);

step++;

} else {

if(varName){

clearInterval(varName);

varName = null

}

}

};

let varName = setInterval(animation, animation_interval);

}

//2、在应用的js中引入utils

import {drawCircle,floorCir} from '/utils/util'

//在onLoad中加入

let tmpObj = {};

tmpObj.evl = score;

tmpObj.x = 60;

tmpObj.y = 60;

tmpObj.radius = 50;

tmpObj.id = 'canvasArcCir';

drawCircle(tmpObj);

//3、在onReady中描绘底圆

onReady: function () {

let tmObj={};

tmObj.x = 60;

tmObj.y = 60;

tmObj.radius = 50;

tmObj.id = 'canvasCircle';

floorCir(tmObj)

}，

//4、在wxml中

{{list.fraction}}分

//5、css样式

/*圆环进度条文字*/

.circle_info{

position: absolute;

width: 100%;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

display: flex;

align-items: center;

justify-content: center

}

.circle_dot{

width:16rpx;

height: 16rpx;

border-radius: 50%;

background-color: #fb9126;

}

.circle_txt{

padding-left: 10rpx;

color: #fff;

font-size: 36rpx;

letter-spacing: 2rpx;

}