基于Vue框架封装的画环形进度条组件

 

这个是基于Vue框架封装的可多次调用的画环形进度条的组件下面是组件代码

<template>
  <div class="progess-container">
    <canvas :id="params.id" width="200" height="200"></canvas>
  </div>
</template>
<script>
export default {
  props: {
    params: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  },
  methods: {
    // canvas属性初始化
    init: function() {
      this.ele = document.getElementById(this.params.id);
      this.ctx = this.ele.getContext("2d");
      this.percent = this.params.percent;
      this.forecolor = this.params.forecolor;
      this.bgcolor = this.params.bgcolor;
      this.center_x = this.ele.width / 2;
      this.center_y = this.ele.height / 2;
      this.speed = 0;
      this.rad = (Math.PI * 2) / 100;
    },
    //画背景圆圈
    drawBackgroundCircle: function() {
      this.ctx.save();
      this.ctx.beginPath();
      this.ctx.lineWidth = 18;
      var radius = this.center_x - this.ctx.lineWidth;
      this.ctx.strokeStyle = this.bgcolor;
      this.ctx.arc(this.center_x, this.center_y, radius, 0, Math.PI * 2, true);
      this.ctx.stroke();
      this.ctx.closePath();
      this.ctx.restore();
    },
    //画前景圆圈
    drawfrontCircle: function(n) {
      this.ctx.save();
      this.ctx.beginPath();
      this.ctx.lineWidth = 18;
      var radius = this.center_x - this.ctx.lineWidth;
      this.ctx.lineCap = "round";
      this.ctx.strokeStyle = this.forecolor;
      this.ctx.arc(
        this.center_x,
        this.center_y,
        radius,
        Math.PI / 2,
        Math.PI / 2 - n * this.rad,
        true
      ); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
      this.ctx.stroke();
      this.ctx.closePath();
      this.ctx.restore();
    },
    // 绘制百分比方法
    drawText: function(n) {
      this.ctx.save();
      this.ctx.fillStyle = "#000000";
      var font_size = 35;
      this.ctx.font = font_size + "px Helvetica";
      var text_width = this.ctx.measureText(n.toFixed(1) + "%").width;
      this.ctx.fillText(
        n.toFixed(1) + "%",
        this.center_x - text_width / 2,
        this.center_y + font_size / 4
      );
      this.ctx.restore();
    },
    //动态渲染方法
    animation: function() {
      this.ctx.clearRect(0, 0, this.ele.width, this.ele.height);
      this.drawBackgroundCircle();
      this.drawfrontCircle(this.speed);
      this.drawText(this.speed);
      if (this.speed >= this.percent) {
        this.speed = this.percent;
        return false;
      }
      this.speed++;
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style>
.progess-container {
  position: relative;
  text-align: center;
  width: 3.75rem;
  margin-top: 0.45rem;
}
canvas {
  width: 2rem;
  height: 2rem;
}
</style>    

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值