uniapp canvas绘制弧形圆环

项目uniapp 绘制弧形圆环

首先说下：uniapp 插件市场有一个弧形进度条，作为组件引用的话是不兼容小程序，所以我做的是直接在本页面中进行绘制，刚开始也是作为组件进行引入的，但是小程序不兼容，无法展示，所以就抛弃掉官网的组件了，之前写过一个h5的vue绘制圆环，就改了改，改成都能兼容的了，具体弧度不会算的可以看我的另一篇文章
UI效果

1. 先确定效果图展示效果
2. 可以看出两个圆环，一个背景圆环，一个进度圆环，所以要声明两个canvas层

我的图层是130*130的，uniapp的适配rpx，所以center_x ，center_y 就应该用他的一半65进行绘制，
context.draw()也要用，原生的一些写法uniapp不支持，text（）方法是绘制里面的文字，我后期改成不在canvas里面进行绘制了，因为我的颜色是不一样的。

	
	
	
		已领
		{{percent}}%
	

具体方法：

childrenTagName() {
	this.$nextTick(() => {
			let score = 0.5 * 100;
			this.percent = score
			this.drawMain(score, "#D2A36C", "#fff","#fff");
	})
},
drawMain(percent, forecolor, bgcolor, fillColor) {
	/*
		@drawing_elem: 绘制对象
		@percent：绘制圆环百分比, 范围[0, 100]
		@forecolor: 绘制圆环的前景色，颜色代码
		@bgcolor: 绘制圆环的背景色，颜色代码
	*/
	var context = uni.createCanvasContext('myCanvasBg', this);
	var center_x = 65 / 2 ;
	var center_y =  65 / 2 ;
	var rad = Math.PI / 3 * 5 / 100; //绘制的为300度的圆

	// 绘制背景圆圈
	function backgroundCircle() {
		context.save();
		context.beginPath();
		context.setLineWidth(4); //设置线宽
		var radius = center_x -4;
		context.setLineCap('round');
		context.setStrokeStyle(bgcolor);
		context.arc(center_x, center_y, radius, -Math.PI / 180 * 240, Math.PI / 180 * 60, false);
		context.stroke();
		context.draw()

	}

	//绘制运动圆环
	function foregroundCircle(n) {
		var context = uni.createCanvasContext('myCanvas', this);
		context.beginPath();
		context.setLineWidth(4); //设置线宽
		var radius = center_x -4;
		context.setLineCap('round');
		context.setStrokeStyle(forecolor);
		context.arc(center_x, center_y, radius, -Math.PI / 180 * 240, -Math.PI / 180 * 240 + n * rad,
			false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
		context.stroke();
		context.draw();
		
	}

	// //绘制文字
	// function text(n) {
	// 	var context = uni.createCanvasContext('myCanvasText', this);
	// 	context.beginPath();
	// 	context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
	// 	context.setStrokeStyle(forecolor);
	// 	var font_size = 10;
	// 	context.setFontSize(font_size);
	// 	var text_width = context.measureText(n.toFixed(0) + "%").width;
	// 	// context.fillText('已领', 12,20);
	// 	context.fillText(n.toFixed(0) + "%", center_x - text_width / 2, center_y + font_size / 2 + 3);
	// 	context.restore();
	// 	context.draw()
	// }

	//执行动画
	(function drawFrame() {
		backgroundCircle();
		// text(percent);
		foregroundCircle(percent);
		
	}());

	// 
},

css层：

.coupon-canvas {
		width: 130rpx;
		height: 130rpx;
		margin-left: 62rpx;
		margin-top: -36rpx;
		.progress_box {
			width: 130rpx;
			height: 130rpx;	
			display: -ms-flexbox;
			display: flex;
			display: -webkit-flex;
			-ms-flex-pack: center;
			justify-content: center;
			-ms-flex-align: center;
			position: relative;
			.myCanvas{
				width: 130rpx;
				height: 130rpx;	
				/* #ifndef MP-WEIXIN */
				position: static !important;
				/* #endif */
				/* #ifdef MP-WEIXIN */
				position: absolute;
				/* #endif */
				
			}
			.receive{
				position: absolute;
				width: 90rpx;
				text-align: center;
				left: 16rpx;
				.percent-receive,.percent{
					/* #ifndef MP-WEIXIN */
					font-size: 12rpx;
					/* #endif */
					/* #ifdef MP-WEIXIN */
					font-size: 24rpx;
					/* #endif */
					// -webkit-transform-origin-x: 0;
					// -webkit-transform: scale(0.96);
					color: #D2A36C;
					
				}
				.percent-receive{
					margin-top: 28rpx;
				}
				.percent{
					margin-top: -10rpx;
				}
			}
		}
		
	}

还有一点注意的就是：样式如果没改之前，默认canvas的样式是position：relation；两个canvas图层是无法重合的；我就加个 .myCanvas{
width: 130rpx;
height: 130rpx;
/* #ifndef MP-WEIXIN /
position: static !important;
/ #endif /
/ #ifdef MP-WEIXIN /
position: absolute;
/ #endif */
} //小程序中的和h5的还不一样,作了区分

实现后的效果：
h5的和小程序的效果