canvas环形进度条

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

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

html代码

绘制底色圆环

 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();}
 

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

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