//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;

}

總結

以上是生活随笔為你收集整理的PHP进度条 小程序,php短视频源码小程序实现圆形进度条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。