1.0.5 • Published 7 years ago

canvas-round-progress

Licence

ISC

Version

1.0.5

Deps

Size

6 kB

Vulns

Weekly

Summary Dependency Versions

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地址：

Keywords

canvas-round-progress canvas-round process