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

---

访问DEMO地址：

• canvas-round-progress效果展示
• npm下载

---