基本参数
普通环形图
实现效果
实现流程
1.通过标签给出canvas宽高，绑定canvas-id一会根据这个进行生成
<canvas class="progress_bg" canvas-id="cpbg"></canvas>
2.页面挂载调用方法进行环形图渲染
下方ctx.beginPath()开辟新路径前后共生成两个环形图，第一个代表下方灰色，第二个代表蓝色
var ctx = uni.createCanvasContext('cpbg', this); let end = (50 / 100 ) * 2 * Math.PI; //设置弧度 console.log(end); ctx.setLineWidth(12); // 设置圆环的宽度 ctx.arc(185, 80, 40, 0, 2 * Math.PI) ctx.setStrokeStyle('#f2f2f2'); ctx.stroke(); //对当前路径进行描边 // ctx.setLineCap('square'); // 设置圆环端点的形状 无圆角 ctx.beginPath(); //开始一个新的路径 ctx.setStrokeStyle('#0079fe'); // 设置圆环的颜色 ctx.setLineCap('round'); // 设置圆环端点的形状 圆角 ctx.arc(185, 80, 40, 0, end, false); ctx.stroke(); //对当前路径进行描边 //设置一个原点(110,110)，半径为100的圆的路径到当前路径 ctx.stroke(); //对当前路径进行描边 ctx.draw();
渐变环形图
效果
代码
var ctx = uni.createCanvasContext('cpbar', this); // 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标) var gradient = ctx.createLinearGradient(0, 0, 150, 0); let increase = 0.05; let end = (50 / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度 let current = -Math.PI / 2; // 起始角度 let timer = setInterval(() => { gradient.addColorStop('0', '#00F2FE'); //渐变颜色 gradient.addColorStop('1.0', '#0079fe'); //渐变颜色 // 圆弧粗度 ctx.setLineWidth(12); ctx.setStrokeStyle(gradient); ctx.setLineCap('square'); ctx.beginPath(); // 参数step 为绘制的百分比 if (current < end) { current = current + increase; } if (current >= end) { current = end; clearInterval(timer); } ctx.arc(85, 65, 40, -Math.PI / 2, current, false); ctx.stroke(); ctx.draw(); }, 20);
数据流环形图
效果
代码
<view class="progress_box"> <canvas class="progress_bg" canvas-id="cpbg"></canvas> <canvas class="progress_bar" canvas-id="cpbar"></canvas> <canvas class="progress_line" canvas-id="cpline"></canvas> <view class="progress_txt"> <view class="progress_info">{{ progress_txt }}%</view> <view class="pcds">正确率</view> </view> </view>
mounted: function() { this.drawProgressbg(); this.drawCircle(this.progress_txt); //参数为1-100 this.drawLine(); }, methods: { drawProgressbg: function() { // 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/> var ctx = uni.createCanvasContext('cpbg', this); ctx.setLineWidth(12); // 设置圆环的宽度 ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色 // ctx.setLineCap('round'); // 设置圆环端点的形状 ctx.setLineCap('square'); // 设置圆环端点的形状 ctx.beginPath(); //开始一个新的路径 ctx.arc(85, 65, 40, 0 * Math.PI, 2 * Math.PI, false); //设置一个原点(110,110)，半径为100的圆的路径到当前路径 ctx.stroke(); //对当前路径进行描边 ctx.draw(); }, drawCircle: function(step) { var ctx = uni.createCanvasContext('cpbar', this); // 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标) var gradient = ctx.createLinearGradient(0, 0, 130, 0); let increase = 0.05; let end = (step / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度 let current = -Math.PI / 2; // 起始角度 let timer = setInterval(() => { gradient.addColorStop('0', '#00F2FE'); gradient.addColorStop('1.0', '#4FACFE'); ctx.setLineWidth(12); ctx.setStrokeStyle(gradient); ctx.setLineCap('square'); ctx.beginPath(); // 参数step 为绘制的百分比 if (current < end) { current = current + increase; } if (current >= end) { current = end; clearInterval(timer); } ctx.arc(85, 65, 40, -Math.PI / 2, current, false); ctx.stroke(); ctx.draw(); }, 20); }, // 画刻度 drawLine() { var context = uni.createCanvasContext("cpline", this); var r = 40; var x0 = 85; var y0 = 65; var x; var y; var lineWidth = 12; for (let i = 0; i < 60; i++) { context.beginPath(); context.setLineWidth(lineWidth); context.setStrokeStyle("#FFFFFF"); x = x0 - r * Math.sin(((6 * (i + 1) - 3) * Math.PI) / 180); y = y0 - r * Math.cos(((6 * (i + 1) - 3) * Math.PI) / 180); // console.log('x0:' + x0 + ' y0:' + y0 + ' x:' + x + ' y:' + y); context.moveTo(x, y); context.arc( x0, y0, r, ((270 - 6 * (i + 1) + 3) * Math.PI) / 180, ((270 - 6 * i) * Math.PI) / 180, false ); context.stroke(); context.closePath(); } context.stroke(); context.draw(); }, }
.progress_box { /* position: relative; */ /* width: 100%; */ height: 200upx; /* background-color: red; */ display: inline-block; align-items: center; justify-content: center; text-align: center; } .pcds { margin-top: 90rpx; color: black; } .progress_bg { position: absolute; width: 150px; height: 150px; } .progress_txt { position: absolute; font-size: 28upx; margin-top: 85rpx; margin-left: 95rpx; color: #999999; } .progress_bar { position: absolute; width: 220px; height: 220px; } .progress_line { position: absolute; width: 220px; height: 220px; } .progress_info { font-size: 36upx; padding-left: 16upx; letter-spacing: 2upx; font-size: 45upx; color: #333333; }
