<template v-if="!cpbarCanvasImg && !cpbgCanvasImg">
<canvas class="progress_bg" canvas-id="cpbg"></canvas>
<canvas class="progress_bar" canvas-id="cpbar"></canvas>
</template>
<template v-if="cpbarCanvasImg && cpbgCanvasImg">
<image class="progress_bg" :src="cpbgCanvasImg" mode=""></image>
<image class="progress_bar" :src="cpbarCanvasImg" mode=""></image>
</template>
第一个圆
drawProgressbg: function() {
// 自定义组件实例 this ,表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
var ctx = uni.createCanvasContext('cpbg', this);
ctx.setLineWidth(12); // 设置圆环的宽度
ctx.setStrokeStyle('#F5F5F5'); // 设置圆环的颜色
ctx.setLineCap('round'); // 设置圆环端点的形状
ctx.beginPath(); //开始一个新的路径
ctx.arc(56, 60, 50, Math.PI, 2 * Math.PI, false);
//设置一个原点(110,110),半径为100的圆的路径到当前路径
ctx.stroke(); //对当前路径进行描边
ctx.draw();
let that = this
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'cpbg',
success: function(res) {
console.log('res1', res)
that.cpbgCanvasImg = res.tempFilePath
}
},that)
},500)
},
第二个圆
drawCircle: function(step, total) {
var ctx = uni.createCanvasContext('cpbar', this);
ctx.setStrokeStyle('#4C77F4');
ctx.setLineWidth(12);
ctx.setLineCap('round');
ctx.beginPath();
// 参数step 为绘制的百分比
step = (step / total) + 1;
if (step >= 2) {
step = step % 2;
}
ctx.arc(56, 60, 50, Math.PI, step * Math.PI, false);
ctx.stroke();
ctx.draw();
let that = this
setTimeout(() => {
uni.canvasToTempFilePath({
canvasId: 'cpbar',
success: function(res) {
console.log('res2', res)
that.cpbarCanvasImg = res.tempFilePath
}
},that)
},500)
}