91 lines
2.7 KiB
Vue
91 lines
2.7 KiB
Vue
<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> |