vue 沿着弧线拖拽进度条_canvas实现弧形可拖动进度条效果

一、效果如下：

二、

三、

1、首先在html中创建一个canvas标签

2、创建一个进度条对象，编写初始化方法,获取canvas对象及上下文环境；event方法是用来绑定事件(具体后面介绍)；draw是用来绘图的方法，这里把Draw对象的全部方法赋给draw方法；创建绘图实例p，绘制初始图形；

var Draw={

init:function(){

this.obj=document.getElementById("canvas"); //获取canvas对象

this.cObj=document.getElementById("canvas").getContext("2d");//获取canvas对象上下文环境

this.event(); //初始化事件

this.pathr=120; //滑动路径半径

this.draw.prototype=this; //draw继承Draw方法

this.p=new this.draw(112,284,18); //创建实例p

}

//...

}

3、在Draw中编写绘图方法draw绘制下图：

(1)创建绘图方法，获取参数

draw:function(x,y,r,j){ //绘图

this.cObj.clearRect(0,0,400,400); //清空画布

this.x=x; //滑块坐标x

this.y=y; //滑块坐标y

this.r=r; //滑块移动路径半径

this.j=j; //橙色圆弧结束弧度值

//...

}

(2)绘制内侧圆弧

this.cObj.beginPath();

this.cObj.lineWidth = 1;

this.cObj.arc(200,200,100,Math.PI*0.75,Math.PI*2.25,false); // 绘制内层圆弧

this.cObj.strokeStyle = '#0078b4';

this.cObj.stroke();

(3)绘制外侧圆弧

this.cObj.beginPath();

this.cObj.arc(200,200,120,Math.PI*0.75,Math.PI*2.25,false); // 绘制外侧圆弧

this.cObj.strokeStyle = '#c0c0c0';

this.cObj.lineCap =