canvas-round-progress

A circular progress bar drawn by canvas that can be used to correlate the number of items left or the progress bar  ***

install

安装和调用

npm i canvas-round-progress
- 通过npm安装后的调用方式：
直接下载js并直接引入：
- 直接下载index.js后： ___

# canvas Taget：

HTML5标签：<canvas class="canvas" data-process="50"></canvas>

# 调用方式：

通过npm安装后的调用方式： * 调用方式

import引入：import canvas from ‘canvas-round-progress’

           new canvas({
             anti: true,
             str: "canvas",
             radio: 10,
             fontSize: 60,
             lineWidth: 5,
             fillStyle: "#424042",
             re_strokeStyle: "#9FF729",
             over_strokeStyle: "#e5e5e5"
       })

直接js引入调用方式：直接js引入：< script src=’canvas-round-progress.js’>< /script>
* 默认调用方式：
```
     new progress({
      str: ".canvas"
       });  * 参数修改调用方式：
```

new progress({

            anti: true,
            str: ".canvas",
            radio: 0,
            fontSize: 60,
            lineWidth: 5,
            fillStyle: "#424042",
            re_strokeStyle:"#9FF729",
            over_strokeStyle:"#e5e5e5"
           }) # param

参数名	参数值
str	canvas选择器，处于列表中或者单个都可以
anti	默认false，进度条逆时针转动，为true时表示进度条顺时针转动
radius	canvas arc方法画圆其实点，默认为0中心圆点
lineWidth	canvas画笔粗细值
re_strokeStyle	进度条剩余数百分比的 canvas剩余进度条颜色
over_strokeStyle	进度条已使用数百分比的 canvas已用进度条颜色
fillStyle	canvas 文字填充颜色

进度条已使用数放置canvas元素的data-process中，如不写则默认为剩余数为0

canvas-round-progress

install

安装和调用

访问DEMO地址：