【Canvas 02】百行代码Canvas酷炫倒计时

作者: 可爱多小姐 | 来源:发表于2019-03-22 10:50 被阅读0次

代码下载：Github
视频地址：慕课·canvas小球倒计时

倒计时

二、倒计时数字展示

2.1、静态数字展示

静态数字展示

如果想用一个一个的圆点来表示数字呢？
其实并不难，将每一个数字看成一个矩阵，比如数字1.

[
        //1
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [1, 1, 1, 1, 1, 1, 1]
        ],

我们可以把一个10*7矩阵看作一个led显示屏，如果想要显示某一个数字，只需要把对应的灯点亮。在这个矩阵中，0为空白，1则用一个小圆点表示。
下面附上数字0-9和冒号：的矩阵js:

digit.js

digit = [
        [
        //0
        [0, 0, 1, 1, 1, 0, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 0, 1, 1, 0],
        [0, 0, 1, 1, 1, 0, 0]
        ],

        [
        //1
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [1, 1, 1, 1, 1, 1, 1]
        ],

        [
        //2
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 1]
        ],

        [
        //3
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 1, 0, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0]
        ],

        [
        //4
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 0],
        [0, 0, 1, 1, 1, 1, 0],
        [0, 1, 1, 0, 1, 1, 0],
        [1, 1, 0, 0, 1, 1, 0],
        [1, 1, 1, 1, 1, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 1, 1]
        ],

        [
        //5
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 1, 1, 1, 1, 0],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0]
        ],

        [
        //6
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 1, 1, 0, 0, 0, 0],
        [1, 1, 0, 0, 0, 0, 0],
        [1, 1, 0, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0]
        ],

        [
        //7
        [1, 1, 1, 1, 1, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0],
        [0, 0, 1, 1, 0, 0, 0]
        ],

        [
        //8
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0],
       [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 1, 1, 0]
        ],

        [
        //9
        [0, 1, 1, 1, 1, 1, 0],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [1, 1, 0, 0, 0, 1, 1],
        [0, 1, 1, 1, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 0, 1, 1],
        [0, 0, 0, 0, 1, 1, 0],
        [0, 0, 0, 1, 1, 0, 0],
        [0, 1, 1, 0, 0, 0, 0]
        ],

        [
        //:
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 1, 1, 0],
        [0, 1, 1, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
        ]
]

确定一个数字的位置

render a digit

为了数字展示的美观，我们需要使每个小球之间有一点距离，所以设半径为R,则每一个小方格的长度为2*（R+1）,所以第一个小球的圆心距离为，x+（R+1）,i和j都是从0开始取值，所以第（i，j）个圆的圆心位置如上图公式所示。

//定义常量
var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;//半径

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }

显示静态数字代码的完整countdown1.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;//半径

window.onload = function() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    render(context);
}

function render(cxt) {

    var hours = 12;
    var minutes = 36;
    var seconds = 59;
    
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt);// 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt);// 每个字水平位置7直径,7*2 = 14半径+1 = 15         
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt);// 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes / 10), cxt);// 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minutes % 10), cxt);  
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt);// 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds / 10), cxt);// 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(seconds % 10), cxt);
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

这段代码设置的巧妙之处在于小时、分钟、秒，取余之后的数字刚好等于该数字在digit[num]的位置.

var hours = 12;
var minutes = 36;
var seconds = 59;

countdown.html
后面只需要改变引入的js文件就可以看见我们不同阶段的演示效果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <body>
        <canvas id="canvas"></canvas>       
        <script type="text/javascript" src="js/digit.js" ></script>
        <script type="text/javascript" src="js/countdown1.js" ></script>
    </body>
</html>

2.2、动态数字展示

倒计时
刷新网页，时间数值改变

倒计时

获取时间

//限制： 小时二位数 不超过4天
var endTime = new Date(2019, 2, 23, 18, 15, 26); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

完整的countdown2.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

//限制： 小时二位数 不超过4天
var endTime = new Date(2019, 2, 23, 18, 15, 26); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

window.onload = function() {
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        canvas.width = WINDOW_WIDTH
        canvas.height = WINDOW_HEIGHT

        curShowTimeSecond = getCurShowTimeSecond()
        render(context)
    }
function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

// 时间更新函数

function render(cxt) {
    var hours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var minute = parseInt((curShowTimeSecond - hours * 3600) / 60);
    var second = curShowTimeSecond % 60;
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt); // 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt); // 每个字水平位置直径7,7*2 = 14半径+1 = 15          
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minute / 10), cxt); // 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minute % 10), cxt);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(second / 10), cxt); // 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(second % 10), cxt);
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

2.3、数字自动倒计时

一个实现动画的基础函数

setInterval(
    function(){
        render();
        update();  
    },
  50            //单位ms，每50ms变化一次
);

更新函数

function update() {
    var nextShowTimeSeconds = getCurShowTimeSecond();
    var nextHours = parseInt(nextShowTimeSeconds / 3600); // 一共需要多少个小时
    var nextMinute = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSecond = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var curMinute = parseInt((curShowTimeSecond - curHours * 3600) / 60);
    var curSecond = curShowTimeSecond % 60;

    if (nextSecond != curSecond) {
        curShowTimeSecond = nextShowTimeSeconds
    }
}

完整的countdown3.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

//限制： 小时二位数 不超过4天
var endTime = new Date(2019, 2, 23, 18, 15, 26); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

window.onload = function() {
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        canvas.width = WINDOW_WIDTH
        canvas.height = WINDOW_HEIGHT
 curShowTimeSecond = getCurShowTimeSecond();   //curShowTimeSecond：当前总共的毫秒数
    
    // 动画效果

        curShowTimeSecond = getCurShowTimeSecond()
        setInterval(
            function() {
                render(context);
                update();
            },
            50 //单位ms，每50ms变化一次
        );
    }
    
function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

function update() {
    var nextShowTimeSeconds = getCurShowTimeSecond();
    var nextHours = parseInt(nextShowTimeSeconds / 3600); // 一共需要多少个小时
    var nextMinute = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSecond = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var curMinute = parseInt((curShowTimeSecond - curHours * 3600) / 60);
    var curSecond = curShowTimeSecond % 60;

    if (nextSecond != curSecond) {
        curShowTimeSecond = nextShowTimeSeconds
    }
}

// 时间更新函数

function render(cxt) {
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
    var hours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var minute = parseInt((curShowTimeSecond - hours * 3600) / 60);
    var second = curShowTimeSecond % 60;
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt); // 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt); // 每个字水平位置直径7,7*2 = 14半径+1 = 15          
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minute / 10), cxt); // 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minute % 10), cxt);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(second / 10), cxt); // 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(second % 10), cxt);
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

2.4、酷炫动画倒计时

炫酷小球

小球运动

function updateBalls(){
    for(var i=0;i<balls.length;i++){
        balls[i].x+=balls[i].vx
        balls[i].y+=balls[i].vy
        balls[i].vy+=balls[i].g
        
        if(balls[i].y>=WINDOW_HEIGHT+RADIUS){//触碰到边缘就让小球反向运动
            balls[i].y=WINDOW_HEIGHT+RADIUS
            balls[i].vy=-balls[i].vy*0.75
        }
    }
}

在变化的数字处增加小球

function addBalls(x,y,num){
    for(var i=0;i<digit[num].length;i++){
        for(var j=0;j<digit[num][i].length;j++){
            if(digit[num][i][j]==1){
                var aBall={
                    x:x+j * 2 * (RADIUS + 1) + (RADIUS + 1),
                    y:y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
                    g:1.5+Math.random(),//加速度
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//使初始速度随机化，小球变化更加灵活
                    vy:-6,//小球初始y速度
                    color:colors[Math.floor(Math.random()*colors.length)]
                }
                balls.push(aBall)
            }
        }
    }
    
}

完整的countdown4.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

//限制： 小时二位数 不超过4天
const endTime = new Date(2019, 2, 23, 18, 15, 26); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

var balls=[];
const colors=["#FFFF00","#FF69B4",'#FF4500','#EE82EE','#B3EE3A','#BFEFFF','#A020F0','#8470FF','#7A67EE','#00FFFF','#EE7AE9']//设置颜色


window.onload = function() {
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        canvas.width = WINDOW_WIDTH
        canvas.height = WINDOW_HEIGHT
 curShowTimeSecond = getCurShowTimeSecond();   //curShowTimeSecond：当前总共的毫秒数
    
    // 动画效果

        curShowTimeSecond = getCurShowTimeSecond()
        setInterval(
            function() {
                render(context);
                update();//负责数据改变
            },
            50 //单位ms，每50ms变化一次
        );
    }
    
function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

function update() {
    var nextShowTimeSeconds = getCurShowTimeSecond();
    var nextHours = parseInt(nextShowTimeSeconds / 3600); // 一共需要多少个小时
    var nextMinute = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSecond = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var curMinute = parseInt((curShowTimeSecond - curHours * 3600) / 60);
    var curSecond = curShowTimeSecond % 60;

    if (nextSecond != curSecond) {
        if(parseInt(curHours/10)!=parseInt(nextHours/10)){
            addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours / 10))
        }
        if(parseInt(curHours%10)!=parseInt(nextHours%10)){
            addBalls(MARGIN_LEFT+ 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10))
        }
        if(parseInt(curMinute/10)!=parseInt(nextMinute/10)){
            addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinute/ 10))
        }
        if(parseInt(curMinute%10)!=parseInt(nextMinute%10)){
            addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinute % 10))
        }
        if(parseInt(curSecond/10)!=parseInt(nextSecond/10)){
            addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSecond / 10))
        }
        if(parseInt(curSecond%10)!=parseInt(nextSecond%10)){
            addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSecond % 10))
        }
        curShowTimeSecond = nextShowTimeSeconds
    }
    
    updateBalls()
}
function updateBalls(){
    for(var i=0;i<balls.length;i++){
        balls[i].x+=balls[i].vx
        balls[i].y+=balls[i].vy
        balls[i].vy+=balls[i].g
        
        if(balls[i].y>=WINDOW_HEIGHT+RADIUS){
            balls[i].y=WINDOW_HEIGHT+RADIUS
            balls[i].vy=-balls[i].vy*0.75
        }
    }
}
function addBalls(x,y,num){
    for(var i=0;i<digit[num].length;i++){
        for(var j=0;j<digit[num][i].length;j++){
            if(digit[num][i][j]==1){
                var aBall={
                    x:x+j * 2 * (RADIUS + 1) + (RADIUS + 1),
                    y:y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
                    g:1.5+Math.random(),//加速度
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//使初始速度随机化，小球变化更加灵活
                    vy:-6,//小球初始y速度
                    color:colors[Math.floor(Math.random()*colors.length)]
                }
                balls.push(aBall)
            }
        }
    }
    
}
// 时间更新函数

function render(cxt) {
    cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
    var hours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var minute = parseInt((curShowTimeSecond - hours * 3600) / 60);
    var second = curShowTimeSecond % 60;
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt); // 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt); // 每个字水平位置直径7,7*2 = 14半径+1 = 15          
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minute / 10), cxt); // 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minute % 10), cxt);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(second / 10), cxt); // 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(second % 10), cxt);
    
    for(var i=0;i<balls.length;i++){
        cxt.fillStyle=balls[i].color
        cxt.beginPath()
        cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true)
        cxt.closePath()
        cxt.fill()
    }
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

2.5、倒计时优化

我们不断的addballs,这会导致内存开销越来越大，所以我们可以设置将已经跳出屏幕的小球清除。

//让弹出屏幕的小球消失，以免内存过大
   var cnt = 0
   for (var i = 0; i < balls.length; i++)
       if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH)
           balls[cnt++] = balls[i]
   while (balls.length > cnt) {
       balls.pop()

   }

设置距离当前一小时计时

var endTime = new Date(); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
endTime.setTime(endTime.getTime() + 3600 * 1000) //距离 1小时倒计时
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

完整代码：countdown5.js

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var MARGIN_LEFT = 30;
var MARGIN_TOP = 60;
var RADIUS = 8;

限制： 小时二位数 不超过4天
var endTime = new Date(); // 注意！！！：data中的参数第二个表示月份，是由0-11表示的。0 - 一月；11- 十二月
endTime.setTime(endTime.getTime() + 3600 * 1000) //距离 1小时倒计时
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒

var balls = [];
const colors = ["#FFFF00", "#FF69B4", '#FF4500', '#EE82EE', '#B3EE3A', '#BFEFFF', '#A020F0', '#8470FF', '#7A67EE', '#00FFFF', '#EE7AE9'] //设置颜色

window.onload = function() {
    var canvas = document.getElementById("canvas")
    var context = canvas.getContext("2d")
    canvas.width = WINDOW_WIDTH
    canvas.height = WINDOW_HEIGHT
    curShowTimeSecond = getCurShowTimeSecond(); //curShowTimeSecond：当前总共的毫秒数

    // 动画效果

    curShowTimeSecond = getCurShowTimeSecond()
    setInterval(
        function() {
            render(context);
            update(); //负责数据改变
        },
        50 //单位ms，每50ms变化一次
    );
}

function getCurShowTimeSecond() {
    var curTime = new Date(); // 获取当前的时间是多少
    var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数
    ret = Math.round(ret / 1000); // 将毫秒转换成秒
    return ret >= 0 ? ret : 0; // 判断 ret，倒计时结束，函数返回0.
}

function update() {
    var nextShowTimeSeconds = getCurShowTimeSecond();
    var nextHours = parseInt(nextShowTimeSeconds / 3600); // 一共需要多少个小时
    var nextMinute = parseInt((nextShowTimeSeconds - nextHours * 3600) / 60);
    var nextSecond = nextShowTimeSeconds % 60;

    var curHours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var curMinute = parseInt((curShowTimeSecond - curHours * 3600) / 60);
    var curSecond = curShowTimeSecond % 60;

    if (nextSecond != curSecond) {
        if (parseInt(curHours / 10) != parseInt(nextHours / 10)) {
            addBalls(MARGIN_LEFT, MARGIN_TOP, parseInt(curHours / 10))
        }
        if (parseInt(curHours % 10) != parseInt(nextHours % 10)) {
            addBalls(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(curHours % 10))
        }
        if (parseInt(curMinute / 10) != parseInt(nextMinute / 10)) {
            addBalls(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinute / 10))
        }
        if (parseInt(curMinute % 10) != parseInt(nextMinute % 10)) {
            addBalls(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(curMinute % 10))
        }
        if (parseInt(curSecond / 10) != parseInt(nextSecond / 10)) {
            addBalls(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(curSecond / 10))
        }
        if (parseInt(curSecond % 10) != parseInt(nextSecond % 10)) {
            addBalls(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(nextSecond % 10))
        }
        curShowTimeSecond = nextShowTimeSeconds
    }

    updateBalls()
}

function updateBalls() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].x += balls[i].vx
        balls[i].y += balls[i].vy
        balls[i].vy += balls[i].g

        if (balls[i].y >= WINDOW_HEIGHT + RADIUS) {
            balls[i].y = WINDOW_HEIGHT + RADIUS
            balls[i].vy = -balls[i].vy * 0.75
        }
    }
    //让弹出屏幕的小球消失，以免内存过大
    var cnt = 0
    for (var i = 0; i < balls.length; i++)
        if (balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH)
            balls[cnt++] = balls[i]
    while (balls.length > cnt) {
        balls.pop()

    }
}

function addBalls(x, y, num) {
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                var aBall = {
                    x: x + j * 2 * (RADIUS + 1) + (RADIUS + 1),
                    y: y + i * 2 * (RADIUS + 1) + (RADIUS + 1),
                    g: 1.5 + Math.random(), //加速度
                    vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, //使初始速度随机化，小球变化更加灵活
                    vy: -6, //小球初始y速度
                    color: colors[Math.floor(Math.random() * colors.length)]
                }
                balls.push(aBall)
            }
        }
    }

}
// 时间更新函数

function render(cxt) {
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
    var hours = parseInt(curShowTimeSecond / 3600); // 一共需要多少个小时
    var minute = parseInt((curShowTimeSecond - hours * 3600) / 60);
    var second = curShowTimeSecond % 60;
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours / 10), cxt); // 小时   
    renderDigit(MARGIN_LEFT + 15 * (RADIUS + 1), MARGIN_TOP, parseInt(hours % 10), cxt); // 每个字水平位置直径7,7*2 = 14半径+1 = 15          
    renderDigit(MARGIN_LEFT + 30 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：    
    renderDigit(MARGIN_LEFT + 39 * (RADIUS + 1), MARGIN_TOP, parseInt(minute / 10), cxt); // 分钟 
    renderDigit(MARGIN_LEFT + 54 * (RADIUS + 1), MARGIN_TOP, parseInt(minute % 10), cxt);
    renderDigit(MARGIN_LEFT + 69 * (RADIUS + 1), MARGIN_TOP, 10, cxt); // 冒号 （4*2+1）= 9  digit.js中 10代表 ：
    renderDigit(MARGIN_LEFT + 78 * (RADIUS + 1), MARGIN_TOP, parseInt(second / 10), cxt); // 秒
    renderDigit(MARGIN_LEFT + 93 * (RADIUS + 1), MARGIN_TOP, parseInt(second % 10), cxt);

    for (var i = 0; i < balls.length; i++) {
        cxt.fillStyle = balls[i].color
        cxt.beginPath()
        cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2 * Math.PI, true)
        cxt.closePath()
        cxt.fill()
    }
}

function renderDigit(x, y, num, cxt) {
    cxt.fillStyle = "#005588";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num][i].length; j++) {
            if (digit[num][i][j] == 1) {
                cxt.beginPath();
                // 圆心位置公式
                cxt.arc(x + j * 2 * (RADIUS + 1) + (RADIUS + 1), y + i * 2 * (RADIUS + 1) + (RADIUS + 1), RADIUS, 0, 2 * Math.PI);
                cxt.closePath();
                cxt.fill();
            }
        }
    }
}

【Canvas 02】百行代码Canvas酷炫倒计时

二、倒计时数字展示

2.1、静态数字展示

确定一个数字的位置

2.2、动态数字展示

2.3、数字自动倒计时

2.4、酷炫动画倒计时

2.5、倒计时优化

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

【Canvas 02】 百行代码Canvas酷炫倒计时

二、倒计时数字展示

2.1、静态数字展示

确定一个数字的位置

2.2、动态数字展示

2.3、数字自动倒计时

2.4、酷炫动画倒计时

2.5、倒计时优化

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

【Canvas 02】百行代码Canvas酷炫倒计时