vue 沿着弧线拖拽进度条_vue 使用canvas画圆弧进度条

话不多说先上效果图，符合需求再往下看：

这是参考有赞商城做的一个小功能。

直接贴方法，到时候直接调用方法传值就好。

html:

id="circle"

class="circle-item"

width="240px"

height="240px"

>

script:mounted() {

this.toCanvas("circle", 70);

//第一个是id，第二个百分比(圆弧到达位置)

},toCanvas(id, progress) {

//canvas进度条

var canvas = document.getElementById(id);

var ctx = canvas.getContext("2d");

var percent = progress; //最终百分比

var circleX = canvas.width / 2; //中心x坐标

var circleY = canvas.height / 2; //中心y坐标

var radius = 90; //圆环半径

var lineWidth = 14; //圆形线条的宽度

//中间的字

var fontSize = 25;

ctx.font = fontSize + "px April";

ct