简介
ceri-progress 是一个基于 ES6 的面向对象编写的 canvas 进度条。
安装
ceri-progress 可以通过 npm 安装：
npm install ceri-progress --save
使用
引入
可以直接使用 import 或者 require 引入：
import CERIProgress from 'ceri-progress';
或者
const CERIProgress = require('ceri-progress');初始化
-- -------------------- ---- ------- ----- ------ - --------------------------------- ----- --- - ------------------------ ----- -------- - --- -------------- ---- ---- ------- ------- -- --- -- --- ------- --- -------------- --- -------- ------- -------- --------- ---
参数说明
ctx(必填)：canvas的context。canvas(必填)：canvas元素。x(必填)： 进度条中心点的横坐标。y(必填)： 进度条中心点的纵坐标。radius(必填)： 进度条的半径。progressWidth(可选)： 进度条的宽度，默认为10。bgColor(可选)： 进度条的背景颜色，默认为#bbb。fgColor(可选)： 进度条的前景颜色，默认为#23B7E5。
API
setProgress(progress: number)
设置进度条进度，参数 progress 为进度值（0-1 之间）
progress.setProgress(0.6);
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ----------
-------
------
-----------------
------- ----------------------------------------------------------------
--------
----- ------ - ---------------------------------
----- --- - ------------------------
----- -------- - --- --------------
---- ----
------- -------
-- ---
-- ---
------- ---
-------------- ---
-------- -------
-------- ---------
---
-------------- -- -
------------------------------------
-- ------
---------
-------
-------总结
ceri-progress 是一个简单易用的进度条工具，可以方便地生成进度条并设置进度值。通过本文的介绍，你已经学会了如何安装和使用它，希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606881e8991b448de8c1