使用canvas 绘制半圆形进度条
样式:半圆形的虚线,虚线大小可调整
<template>
<!-- 绘制半圆形进度条 -->
<div class="progress_item">
<canvas class="progress_ring" type="2d" ref="bgline"></canvas>
<canvas class="progress_draw" type="2d" ref="drawLine"></canvas>
</div>
</template>
<script>
export default {
name: 'CircleBar',
props: {
percent: {
type: Number,
default: 0
},
color: {
type: String,
default: '#5B9EFF'
}
},
methods: {
drawProgress() {
// 1、背景 半圆背景虚线底
this.drawCircle('bgline')
// 2、选中半圆虚线
this.drawCircle('drawLine', this.percent, this.color)
},
drawCircle(id, percent = 2, color='#EDEDED') {
const radius = 120; // 半径
// 圆心坐标
const x = 160;
const y = 140;
// const Canvas = document.getElementById(id);
const Canvas = this.$refs[id];
// 1、背景 半圆背景虚线底
const Ctx = Canvas.getContext('2d');
Ctx.clearRect(0, 0, 2*x, y);
Ctx.beginPath()
Ctx.strokeStyle = color
Ctx.lineWidth = 18;
Ctx.lineCap = "line";
Ctx.setLineDash([6, 12]);
Ctx.arc(x,y,radius,Math.PI, percent*Math.PI);
Ctx.stroke();
}
},
mounted() {
this.$nextTick(() => {
this.drawProgress(this.percent);
})
}
}
</script>
<style lang="scss" scoped>
.progress_item{
width:260px;
position: relative;
height: 100%;
}
.progress_ring, .progress_draw{
position: absolute;
left:100px;
transform: translateX(-50%);
z-index: 3;
top:0;
width:200px;
height: 100px;
}
// .progress_move{position: absolute;left:50%;transform: translateX(-50%);z-index: 5;top:-12px;width:300px;height: 170px;}
</style>