<template>
  <view>
    <canvas canvas-id="circleCanvas" style="width: 300px; height: 300px;border: 2rpx solid #000;"></canvas>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
		cavasConfig:{
			canvasWidth: 300,
			canvasHeight: 300,
			lineWidth:15,
			radius: 73, // 内圆的半径
			startAngle: -90, // 起始角度，-90度，即垂直方向的3点钟位置
			bigRadius:90,// 外圆的半径
			cxt:null,
			colorBg:'#f7c1f5',
			bigColorBg:'#d1ccf4',
			color:'#e933dd',
			bigColor:'#6452da',
			bigAngle:270,
			angle:200,
			startSmallAngle:0,
			bigStartAngle:0,
			stop:0,
			bigStop:0
		}
		
    };
  },
  onLoad() {
  },
  onReady() {
	this.cavasConfig.ctx = uni.createCanvasContext('circleCanvas', this);
    this.drawCircle('bottom',360,this.cavasConfig.bigRadius,this.cavasConfig.bigColorBg);
	this.drawCircle('bottom',360,this.cavasConfig.radius,this.cavasConfig.colorBg);
	this.doAnimation(0)
	this.doAnimation(1)
  },
  methods: {
	  doAnimation(type){
		
		  if(type == 0){
			  if(this.cavasConfig.bigStop === 1){
				  return
			  }
			  if(this.cavasConfig.bigStartAngle >= this.cavasConfig.bigAngle){
				  this.cavasConfig.bigStartAngle = this.cavasConfig.bigAngle
				  this.cavasConfig.bigStop = 1;
			  }else{
				  this.cavasConfig.bigStartAngle += this.cavasConfig.bigAngle/50
			  }
			  this.drawCircle('round',this.cavasConfig.bigStartAngle,this.cavasConfig.bigRadius,this.cavasConfig.bigColor);
		  }else{
			  if(this.cavasConfig.stop == 1){
				  return 
			  }
			  if(this.cavasConfig.startSmallAngle >= this.cavasConfig.angle){
				  this.cavasConfig.startSmallAngle = this.cavasConfig.angle
				  this.cavasConfig.stop = 1;
			  }else{
				  this.cavasConfig.startSmallAngle += this.cavasConfig.angle/50
			  }
			  this.drawCircle('round',this.cavasConfig.startSmallAngle,this.cavasConfig.radius,this.cavasConfig.color);
		  }
		requestAnimationFrame(() => {
			this.doAnimation(type)
		})
	  },
	  // lineCap线条类型  edangle绘制角度  radius 直径 color 线条颜色
    drawCircle(lineCap,edangle,radius,color) {
		this.cavasConfig.ctx.save()
		const cx = this.cavasConfig.canvasWidth / 2
		const cy = this.cavasConfig.canvasHeight / 2
		this.cavasConfig.ctx.lineCap = lineCap
		let start = this.cavasConfig.startAngle*Math.PI/180
		let end = (edangle+this.cavasConfig.startAngle)*Math.PI/180
		this.cavasConfig.ctx.beginPath()
		this.cavasConfig.ctx.arc(cx, cy, radius , start, end);
		this.cavasConfig.ctx.lineWidth = this.cavasConfig.lineWidth; // 设置线宽
		this.cavasConfig.ctx.strokeStyle = color; // 设置绘制样式为蓝色
		this.cavasConfig.ctx.stroke(); // 绘制路径
		this.cavasConfig.ctx.closePath()
		this.cavasConfig.ctx.restore()
		this.cavasConfig.ctx.draw(true)
    }
  }
};
</script>