canvas-round-progress v1.0.5

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