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

代码下载：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();
            }
        }
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,686评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,668评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,160评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,736评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,847评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,043评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,129评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,872评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,318评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2赞 351