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

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

访问DEMO地址：

• canvas-round-progress效果展示
• github