赞
踩
<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) }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。