canvas实现弧形可拖动进度条效果

canvas实现弧形可拖动进度条效果实现弧形可拖动进度条效果

本篇文章主要介绍了canvas实现弧形可拖动进度条的实例方法，具有很好的参考价值。下面跟着小编一起来看

下吧

一、效果如下：

二、

本文是实现可拖动滑块实现的基本思路，及一个简单的dome，（https://github.com/pangyongsheng/canvas-arc-draw）

三、

1、首先在、首先在html中创建一个中创建一个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绘制下图：绘制下图：