使用canvas 绘制半圆形进度条

自律的蜗牛

已于 2025-02-19 09:16:11 修改

阅读量182

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 前端 html

于 2024-12-12 16:12:40 首次发布

本文链接：https://blog.youkuaiyun.com/ben_grf/article/details/144429321

使用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>