[JavaScript知识库]canvas环形进度条

近日倒腾了canvas，整了个环形进度条了 ，不得不说canvas是真的无所不能，极其强大。那么废话不多说，先上效果图。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvas 元素本身是没有绘图能力的,可以看成一个画图的容器。所有的绘制工作必须在 JavaScript 内部完成：getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

html代码

<template>
  <div>
    <canvas id="myCanvas" :width="width" :height="height"></canvas>
  </div>
</template>

绘制底色圆环

 mounted() {
    let percent = "70";
    this.drawCircle(percent);
  },
  methods: {
    drawCircle(percent) {
      this.canvas = document.getElementById("myCanvas");
      this.context = this.canvas.getContext("2d");
      this.context.beginPath();
      this.context.arc(100, 100, 50, 0, 2 * Math.PI, false);
      this.context.lineWidth = 10;
      this.context.strokeStyle = "rgba(208, 232, 254, 1)";
      this.context.stroke();
      this.writeCircle(percent);
    },

绘制有色圆环

  writeCircle(percent) {
      var startAngle = (3 / 2) * Math.PI; //开始位置弧度 数学里的12点方向
      var diffAngle = (percent / 100) * Math.PI * 2; //完成进度弧度值
      this.context.beginPath();
      this.context.arc(100, 100, 50, startAngle, diffAngle + startAngle, false);
      this.context.strokeStyle = "rgba(68, 163, 252, 1";
      this.context.lineCap = "round";
      this.context.stroke();
    }

这样就得到简单的环形进度条啦~

完整代码也附上，数据是假数据，替换一下即可成为动态的环形进度条哦。

<template>
  <div>
    <canvas id="myCanvas" :width="width" :height="height"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      context: "",
      canvas: "",
      R:100
    };
  },
  mounted() {
    let percent = "70";
    this.drawCircle(percent);
  },
  methods: {
    drawCircle(percent) {
      this.canvas = document.getElementById("myCanvas");
      this.context = this.canvas.getContext("2d");
      this.context.beginPath();
      this.context.arc(100, 100, 50, 0, 2 * Math.PI, false);
      this.context.lineWidth = 10;
      this.context.strokeStyle = "rgba(208, 232, 254, 1)";
      this.context.stroke();
      this.writeCircle(percent);
    },

    writeCircle(percent) {
      var startAngle = (3 / 2) * Math.PI; //开始位置弧度 数学里的12点方向
      var diffAngle = (percent / 100) * Math.PI * 2; //完成进度弧度值
      this.context.beginPath();
      this.context.arc(100, 100, 50, startAngle, diffAngle + startAngle, false);
      this.context.strokeStyle = "rgba(68, 163, 252, 1";
      this.context.lineCap = "round";
      this.context.stroke();
    }
  },
};
</script>

<style>
</style>