效果图:
实现:
function drawCircleProgress(canvasId, backStrokeColor,strokeColor,x,y,radius,percent,text,fontSize,fontColor){
// console.log("canvasId : " + canvasId + " ; backStrokeColor : " + backStrokeColor + " ; strokeColor : " + strokeColor+
// " ; width : " + width + " ; height : " + height + " ; leftMargin : " + leftMargin + " ; topMargin : " + topMargin+
// " ; percent : " + percent + " ; text : " + text + " ; fontSize : " + fontSize + " ; fontColor : " + fontColor);
// var radius = (Math.min(width, height) / 3.5)-6;
// var x = (width+leftMargin)/2.5;
// var y = (height+topMargin)/2.5;
// var cxt_arc = wx.createCanvasContext(canvasId);//创建并返回绘图上下文context对象。
// cxt_arc.setLineWidth(6);
// cxt_arc.setStrokeStyle(backStrokeColor);
// cxt_arc.setLineCap('round')
// cxt_arc.beginPath();//开始一个新的路径
// cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false);//设置一个原点(106,106),半径为100的圆的路径到当前路径
// cxt_arc.stroke();//对当前路径进行描边
// cxt_arc.setLineWidth(6);
// cxt_arc.setStrokeStyle(strokeColor);
// cxt_arc.setLineCap('round')
// cxt_arc.beginPath();//开始一个新的路径
// cxt_arc.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI * (percent / 100), false);
// cxt_arc.stroke();//对当前路径进行描边
// var finalSize = fontSize/2;
// cxt_arc.beginPath();
// cxt_arc.setFontSize(finalSize);
// cxt_arc.setFillStyle(fontColor);
// cxt_arc.fillText(text, x-(finalSize+2), y+5);
// cxt_arc.draw();
var cxt_arc = wx.createCanvasContext(canvasId);//创建并返回绘图上下文context对象。
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle(backStrokeColor);
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(x, y, radius, 0, 2 * Math.PI, false);//设置一个原点(106,106),半径为100的圆的路径到当前路径
cxt_arc.stroke();//对当前路径进行描边
cxt_arc.setLineWidth(6);
cxt_arc.setStrokeStyle(strokeColor);
cxt_arc.setLineCap('round')
cxt_arc.beginPath();//开始一个新的路径
cxt_arc.arc(x, y, radius, 0 * Math.PI, 2 * Math.PI * (percent / 100), false);
cxt_arc.stroke();//对当前路径进行描边
var finalSize = fontSize / 2;
cxt_arc.beginPath();
cxt_arc.setFontSize(finalSize);
cxt_arc.setFillStyle(fontColor);
cxt_arc.fillText(text, x - (finalSize + 2), y + 5);
cxt_arc.draw();
}
参数:
1.重点参数:canvasId-wxml里面canvas标签的canvas-id;x,y-圆心点坐标;radius-圆半径
2.显示效果配置参数:backStrokeColor-圆环背景色;strokeColor-圆环颜色;percent-百分比占比;text-圆中心显示文字(如:“60%”);fontSize-text的文字大小;fontColor-text的字体颜色
注:涉及到尺寸的参数单位都是px。
使用:
1.wxml
<canvas canvas-id='canvasId'></canvas>
此处的canvasId替换成你传给drawCircleProgress方法的canvasId。
2.js
在onload生命周期回调中调用drawCircleProgress。
使用起来简单粗暴~。~
完整实现和使用代码下载:
https://download.csdn.net/download/yonghuming_jesse/10738500
博主其他上传资源下载链接:
自制免费无广告小说阅读APP下载:
https://download.csdn.net/download/yonghuming_jesse/10390364
全屏播放视频不拉伸源码:
https://download.csdn.net/download/yonghuming_jesse/10646274
科大讯飞语音评测服务接入源码:
https://download.csdn.net/download/yonghuming_jesse/10616924
android饺子播放器使用源码:
https://download.csdn.net/download/yonghuming_jesse/10619119
视频播放前显示视频第一帧源码:
https://download.csdn.net/download/yonghuming_jesse/10646332
安卓环状百分比显示视图源码:
https://download.csdn.net/download/yonghuming_jesse/10677919
最后推荐给一些想进大厂或者还没有拿到心仪offer的攻城狮们一本书,由大厂java面试官胡书敏编写,满满的干货,助你进到想去的公司。