canvas环形倒计时组件的示例代码

本文介绍了canvas环形倒计时组件的示例代码，分享给大家，具体如下：

效果如下图一：

Canvas环形倒计时组件

Canvas环形倒计时是基于Canvas实现的倒计时，建议于移动端使用

nofollow" target="_blank" href="https://github.com/BrigeCJ/Countdown">Canvas环形倒计时 下载地址

一、如何使用

1. HTML代码

ID属性可随意取名

2. 引入process.js文件

页面引用

3. 初始化参数

实例化即可

window.onload = function () {
let ctd = new Countdown();
ctd.init();
};
 

二、settings参数说明

以下参数非必选项，可根据具体需求配置

属性
size: 130,// 绘制圆形的最大尺寸，宽=高
borderWidth: 4, // 边框宽度
borderColor:"#fff", // 边框颜色
outerColor:"#fff",// 最外层底圆颜色
scheduleColor:"#fff", // 进度条动画颜色
fontColor: "#fff",// 字体颜色
ringColor: "#ffc720", // 进度条环形颜色
innerColor: "#4e84e5",// 最内圆底色
fontSize: 50,
time: 5
});
};

三、示例代码

HTML代码