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


Posted in HTML / CSS onJune 14, 2018

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

效果如下图一:

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

Canvas环形倒计时组件

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

Canvas环形倒计时 下载地址

一、如何使用

1. html代码

ID属性可随意取名

<canvas id="canvas"></canvas>

2. 引入process.js文件

页面引用

<script src="js/process.js"></script>

3. 初始化参数

实例化即可

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

</script>

二、settings参数说明

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

window.onload = function () {
        let ctd = new Countdown();
        ctd.init({
            id: "canvas",         // ID,canvas一定要有ID属性
            size: 130,            // 绘制圆形的最大尺寸,宽=高
            borderWidth: 4,       // 边框宽度
            borderColor:"#fff",   // 边框颜色
            outerColor:"#fff",    // 最外层底圆颜色
            scheduleColor:"#fff", // 进度条动画颜色
            fontColor: "#fff",    // 字体颜色
            ringColor: "#ffc720", // 进度条环形颜色
            innerColor: "#4e84e5",// 最内圆底色
            fontSize: 50,
            time: 5
        });
    };

三、示例代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: #c2c1ce;
        }
        .container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 130px;
            height: 130px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <canvas class="canvas" id="canvas"></canvas>
</div>
<script src="js/process.js"></script>
<script>
    window.onload = function () {
        let ctd = new Countdown();
        ctd.init();
    };
</script>
</body>
</html>

js

/**
 * Created by 谭瞎 on 2018/3/15.
 */

function Countdown() {
    // 设置默认参数
    this.settings = {
        id: "canvas",         // ID,canvas一定要有ID属性
        size: 130,            // 绘制圆形的最大尺寸,宽=高
        borderWidth: 4,       // 边框宽度
        borderColor:"#fff",   // 边框颜色
        outerColor:"#fff",    // 最外层底圆颜色
        scheduleColor:"#fff", // 进度条动画颜色
        fontColor: "#fff",    // 字体颜色
        ringColor: "#ffc720", // 进度条环形颜色
        innerColor: "#4e84e5",// 最内圆底色
        fontSize: 50,
        time: 5
    }
}

Countdown.prototype.init = function (opt) {
    this.obj = document.getElementById(this.settings.id);
    this.obj.width = this.settings.size;
    this.obj.height = this.settings.size;
    this.ctx = this.obj.getContext("2d");
    extend(this.settings, opt);
    this.countdown();
};

// 绘制底色
Countdown.prototype.drawBackground = function () {
    this.drawCircle(0, 360, 0, this.settings.outerColor);
};
// 绘制进度条动画背景
Countdown.prototype.drawProcess = function () {
    this.drawCircle(0, 360, 4, this.settings.ringColor);
};

// 绘制倒计时
Countdown.prototype.drawInner = function () {
    this.drawCircle(0, 360, 23, this.settings.innerColor);
    this.strokeBorder(this.settings.borderWidth);
};

// 绘制进度条动画
Countdown.prototype.drawAnimate = function () {
    // 旋转的角度
    let deg = Math.PI / 180;
    let v = schedule * 360,
        startAng = -90,
        endAng = -90 + v;

    this.ctx.beginPath();
    this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2);
    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -3, startAng * deg, endAng * deg, false);
    this.ctx.fillStyle = this.settings.scheduleColor;
    this.ctx.fill();
    this.ctx.closePath();

};
// 绘制边框
Countdown.prototype.strokeBorder = function (borderWidth) {
    this.ctx.lineWidth = borderWidth;
    this.ctx.strokeStyle = this.settings.borderColor;
    this.ctx.stroke();
};
// 绘制文字
Countdown.prototype.strokeText = function (text) {
    this.ctx.textAlign = "center";
    this.ctx.textBaseline = "middle";
    this.ctx.font = this.settings.fontSize+"px"+ " microsoft yahei";
    this.ctx.fillStyle = this.settings.fontColor;
    this.ctx.fillText(text, this.settings.size / 2, this.settings.size / 2);
};
// 绘制圆
Countdown.prototype.drawCircle = function (startAng, endAng, border, fillColor) {
    let deg = Math.PI / 180;
    this.ctx.beginPath();
    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -border, startAng * deg, endAng * deg, false);
    this.ctx.fillStyle = fillColor;
    this.ctx.fill();
    this.ctx.closePath();
};
// 进度条动画
Countdown.prototype.countdown = function () {
    let oldTime = +new Date();
    timer = setInterval(() => {
        let allMs = this.settings.time * 1000,// 如30*1000=30 000ms
            currentTime = +new Date();
        // 步长=(当前的时间-过去的时间)/总秒数
        schedule = (currentTime - oldTime) / allMs;
        this.schedule = schedule;

        this.drawAll(schedule);
        if (currentTime - oldTime >= allMs) {
            // 重绘
            this.drawBackground();
            this.drawProcess();
            this.drawAnimate();
            this.drawInner();
            this.strokeText(0);
            clearInterval(timer);
        }
    }, 100);
};

// 绘制所有
Countdown.prototype.drawAll = function (schedule) {
    schedule = schedule >= 1 ? 1 : schedule;
    let text = parseInt(this.settings.time * (1 - schedule)) + 1;
    // 清除画布
    this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
    this.drawBackground();
    this.drawProcess();
    this.drawAnimate();
    this.drawInner();
    this.strokeText(text);
};

// 对象拷贝
function extend(obj1,obj2){
    for(let attr in obj2){
        obj1[attr] = obj2[attr];
    }
}

四、附加——canvas准备工作

canvas其实没有那么玄乎,它不外乎是一个H5的标签,跟其它HTML标签如出一辙:

<canvas id="canvas"></canvas>

注意最好在一开始的时候就给canvas设置好其宽高(若不设定宽高,浏览器会默认设置canvas大小为宽300、高100像素),而且不能使用css来设置(会被拉伸),建议直接写于canvas标签内部:

<canvas id="canvas" width="130" height="130"></canvas>

canvas本身没有任何的绘图能力,所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas(这意味着得给canvas设个id):

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

1.准备好画笔之后就可以开始绘图了,环形其实就是半径不同的同心圆,圆心坐标是(size/2,size/2), 先画一个最大的白色背景底圆,半径是size/2。

let deg = Math.PI / 180;
// beginPath()可以做到隔离路径绘制效果的作用,防止之前的效果被污染。
ctx.beginPath();

// tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();

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

2.开始画第二个黄色打底圆,圆心也是(size/2,size/2),只是半径比白色底圆小4px,所以黄色底圆的半径是(size/2-4)

let deg = Math.PI / 180;
// beginPath()可以做到隔离路径绘制效果的作用,防止之前的效果被污染。
ctx.beginPath();

// tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();

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

3.开始画蓝色内圆,同理圆心为(size/2,size/2),半径为(size-23),再给它加上4px的白色边框。

let deg = Math.PI / 180;
// beginPath()可以做到隔离路径绘制效果的作用,防止之前的效果被污染。
ctx.beginPath();

// tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2-23, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();

// 白色边框
ctx.lineWidth = 4;
ctx.strokeStyle = #fff;
ctx.stroke();

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

4.绘制文字,垂直居中

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#fff";
// ctx.fillText(文字,相对画布的X坐标,相对画布的Y坐标)
ctx.fillText(30, size / 2, size / 2);

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

5.如何制作动画?其实也是画白色圆的过程,慢慢的覆盖黄色进度条的过程,那么先把白色的圆画出来出来,这个时候蓝圆就会被白色的动画圆给盖住,这个时候最后画蓝圆就好了。

let deg = Math.PI / 180;
ctx.beginPath();
// tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();

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

6.比较简单的绘画过程完成了,接下来要将动画和数字关联起来,利用当前的最新时间-最开始的时间,再除总的时间可以得到一个关键的百分比,这个百分比决定数字的变化,以及白色动画圆绘制的角度。

Countdown.prototype.countdown = function () {
    let oldTime = +new Date();// 过去的时间:1522136419291
    timer = setInterval(() => {
        let currentTime = +new Date();// 现在的时间:1522136419393
        let allMs = this.settings.time * 1000;// 总时间豪秒数:如30*1000=30 000ms
        schedule = (currentTime - oldTime) / allMs;// 绘制百分比:(1522136419393-1522136419291)/30000=0.0204
        this.schedule = schedule;
        this.drawAll(schedule);
        if (currentTime - oldTime >= allMs) {
            // 重绘
            this.drawBackground();
            this.drawProcess();
            this.drawAnimate();
            this.drawInner();
            this.strokeText(0);
            clearInterval(timer);
        }
    }, 10);
};

// 绘制所有
Countdown.prototype.drawAll = function (schedule) {
    schedule = schedule >= 1 ? 1 : schedule;
    let text = parseInt(this.settings.time * (1 - schedule)) + 1;
    // 清除画布
    this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
    this.drawBackground();
    this.drawProcess();
    this.drawAnimate();
    this.drawInner();
    this.strokeText(text);
};

// 绘制进度条动画
Countdown.prototype.drawAnimate = function () {
    // 旋转的角度
    let deg = Math.PI / 180;
    let v = schedule * 360,
        startAng = -90,// 开始角度
        endAng = -90 + v;// 结束角度

    this.ctx.beginPath();
    this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2);
    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false);
    this.ctx.fillStyle = this.settings.scheduleColor;
    this.ctx.fill();
    this.ctx.closePath();
};

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

面向过程版本

/**
    * 进度条动画
    */
    countdown: function () {
        this.getSystemInfo().then(v => {
            // 自适应
            let width = v.windowWidth,
                size = width >= 414 ? 66 : 400 / 414 * 66;
            size = parseInt(size);
            size = size % 2 ? size + 1 : size;

            let maxtime =30,
                sTime = +new Date,

                temp = setInterval(() => {
                    let time = maxtime * 1000,
                        currentTime = +new Date,
                        schedule = (currentTime - sTime) / time;

                    this.drew(schedule, maxtime, size);

                    if (currentTime - sTime >= time) {
                        // 绘制文字
                        this.setData({
                            schedule: 0
                        });
                        clearInterval(temp);
                    };
                }, 100);

        });
    },

    /**
     * 绘制
     */
    drew: function (schedule, val, size) {
        size = size || 66;
        const _ts = this;
        schedule = schedule >= 1 ? 1 : schedule;

        let text = parseInt(val - val * schedule),
            r = size / 2,
            deg = Math.PI / 180;

        _ts.setData({
            width: size,
            height: size,
            schedule: text + 1
        });

        // 清除画布
        ctx.clearRect(0, 0, size, size);

        // 绘制白色底
        ctx.beginPath();
        ctx.arc(r, r, r, 0 * deg, 360 * deg);
        ctx.fillStyle = 'rgba(255,255,255,1)';
        ctx.closePath();
        ctx.fill();

        // 绘制橙色
        ctx.beginPath();
        ctx.arc(r, r, r - 2, 0 * deg, 360 * deg);
        ctx.fillStyle = 'rgba(248,200,80,1)';
        ctx.closePath();
        ctx.fill();

        // 绘制白色进度条
        let v = schedule * 360;

        ctx.beginPath();
        ctx.moveTo(r, r);
        ctx.arc(r, r, r, -90 * deg, (-90 + v) * deg);

        ctx.fillStyle = 'rgba(255,255,255,1)';
        ctx.closePath();
        ctx.fill();

        // 中心蓝色底
        ctx.beginPath();
        ctx.arc(r, r, r - 12, 0 * deg, 360 * deg);
        ctx.fillStyle = 'rgba(90,140,220,1)';
        ctx.closePath();
        ctx.fill();

        // 绘制文字
        ctx.strokeText();
        
        // 统一画
        ctx.draw();
            
    },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
canvas实现手机的手势解锁的步骤详细
Mar 16 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 #HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 #HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 #HTML / CSS
详解android与HTML混合开发总结
Jun 06 #HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 #HTML / CSS
Html5之title吸顶功能
Jun 04 #HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 #HTML / CSS
You might like
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php获取系统变量方法小结
2015/05/29 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
js防止表单重复提交实现代码
2012/09/05 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python交换变量
2008/09/06 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
Python中return函数返回值实例用法
2020/11/19 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
办公室前台的岗位职责
2013/12/20 职场文书
一年级班主任寄语
2014/01/19 职场文书
房屋买卖委托公证书
2014/04/08 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
学校工会工作总结2015
2015/05/19 职场文书
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
解决redis批量删除key值的问题
2022/03/23 Redis
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python