canvas绚丽的时钟效果（下）_canvas 点阵特效-CSDN博客

本文链接：https://blog.csdn.net/MayMayJn/article/details/53507246

虽然这是慕课网上的一个教程，但是看一遍总有好多地方比较朦胧，于是就跟着手敲了一遍代码，去弄懂每一个函数的作用就差不多了。
现在我的时间是15：54分！

时钟效果

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body style="height: 100%;">
    <canvas id="canvas" style="height: 100%;">
        当前浏览器不支持Canvas，请更换浏览器后再试
    </canvas>

    <script src="digit.js"></script>
    <script src="countdown.js"></script>
</body>
</html>

因为数字是以点阵形式显示的，所以必须定义时钟数字的数组。最后一个是：的效果
digit.js

digit =
    [
        [
            [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]
        ],//0
        [
            [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]
        ],//1
        [
            [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,1,1],
            [1,1,1,1,1,1,1]
        ],//2
        [
            [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]
        ],//3
        [
            [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]
        ],//4
        [
            [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]
        ],//5
        [
            [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]
        ],//6
        [
            [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]
        ],//7
        [
            [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]
        ],//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,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]
        ],//9
        [
            [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]
        ]//:
    ];

countdown.js

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

//声明结束时间
// const endTime = new Date(2016,11,7,23,59,59);

// var endTime = new Date();
// endTime.setTime(endTime.getTime() + 3600*1000);

//全局变量，表示现在倒计时需要多少秒
var curShowTimeSeconds = 0;
//声明一个数组存储小球
var balls = [];
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];


window.onload = function () {
    var canvas = document.getElementById('canvas');
    //绘图的上下文环境
    var context = canvas.getContext("2d");

    WINDOW_WIDTH = document.body.scrollWidth;
    WINDOW_HEIGHT = document.body.scrollHeight;

    MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
    RADIUS = Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1;

    MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);

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

    curShowTimeSeconds = getCurrentShowTimeSeconds();

    //动画
    setInterval(
        function() {
            render(context);
            update();
        }
        ,
        50
    );

}

// function getCurrentShowTimeSeconds() {
//  var curTime = new Date();//当前的时间
//  //截止的时间
//  var ret = endTime.getTime() - curTime.getTime();
//  ret = Math.round(ret/1000);

//  return ret >= 0 ? ret : 0;
// }

function getCurrentShowTimeSeconds() {
    var curTime = new Date();//当前的时间
    var ret = curTime.getHours()*3600 + curTime.getMinutes()*60 + curTime.getSeconds();

    return ret;
}
//时钟变换的函数
function update() {

    var nextShowTimeSeconds = getCurrentShowTimeSeconds();

    var nextHours = parseInt(nextShowTimeSeconds/3600);
    var nextMinutes = parseInt((nextShowTimeSeconds - nextHours*3600)/60);
    var nextSeconds = parseInt(nextShowTimeSeconds % 60);

    var curHours = parseInt(curShowTimeSeconds/3600);
    var curMinutes = parseInt((curShowTimeSeconds - curHours*3600)/60);
    var curSeconds = parseInt(curShowTimeSeconds % 60);

    if (nextSeconds != curSeconds) {
        //小时
        if (parseInt(curHours/10)!=parseInt(nextHours/10)) {
            addBalls(MARGIN_LEFT+0, 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(curMinutes/10)!=parseInt(nextMinutes/10)) {
            addBalls(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10));
        }
        if (parseInt(curMinutes%10)!=parseInt(nextMinutes%10)) {
            addBalls(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10));
        }
        //秒
        if (parseInt(curSeconds/10)!=parseInt(nextSeconds/10)) {
            addBalls(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10));
        }
        if (parseInt(curSeconds%10)!=parseInt(nextSeconds%10)) {
            addBalls(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10));
        }

        curShowTimeSeconds = 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.5;
        }
    }

    //改进性能，将窗口外的小球弹出数组
    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 > Math.min(300,cnt)){
        balls.pop();
    }
}
//添加小球的函数
function addBalls(x,y,num) {

    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num].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:-5,
                    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(curShowTimeSeconds/3600);
    var minutes = parseInt((curShowTimeSeconds-hours*3600)/60);
    var seconds = curShowTimeSeconds % 60;

    //绘图的函数，前两个参数是绘图的位置，其次是绘制哪一位数字，再把绘图环境传过去
    renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);
    renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
    renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
    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);
    renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
    renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%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 = "rgb(0, 102, 153)";
    for (var i = 0; i < digit[num].length; i++) {
        for (var j = 0; j < digit[num].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(); 
            }
        }
    }
}

我注释掉的这一段

// var endTime = new Date();
// endTime.setTime(endTime.getTime() + 3600*1000);

和这一段

// function getCurrentShowTimeSeconds() {
//  var curTime = new Date();//当前的时间
//  //截止的时间
//  var ret = endTime.getTime() - curTime.getTime();
//  ret = Math.round(ret/1000);

//  return ret >= 0 ? ret : 0;
// }

可以实现一个小时倒计时的效果。
我觉得这个demo的难点一是理解数字时钟显示的过程；
再者就是计时的动画的函数；
最后就是小球的动画效果。