利用canvas实现炫酷的倒计时效果

最新推荐文章于 2024-04-08 17:24:49 发布
最新推荐文章于 2024-04-08 17:24:49 发布
阅读量1.5k 收藏 8
点赞数
分类专栏： 前端 文章标签： canvas 倒计时 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bobbi001/article/details/100120512
版权

1.效果预览（文章最后面有源码）

2.代码实现

  2.1 简要分析

        这个案例可以大概分成三步来实现：首先绘制出时间，然后根据时间的变动产生相应的彩色小球，最后让这些小球运动起来。

    第一步：通过观察我们可以看到，这些时间都是用一个个小球拼出来的，所以我们采用的方法就是利用一个点阵来表示一个数字，例如数字0就可以用如下的点阵来表示，具体绘制的时候，在数字1的位置进行圆球的绘制，数字0的位置就不绘制，最后就会达到右边的显示效果。

                                                    

 

        第二步：当时间变动后，对应的数字会发生变化，那么在变化后的数字那里会产生彩色的小球，我们这里可以按照第一步的方法来绘制小球，只不过这个小球是具有不同的颜色的。

        第三步：让产生的彩色小球运动起来，只需要改变小球的坐标就可以了，但是这中间还会有一些参数的处理，使得小球按照我给出的预览图中的方式来进行运动。

 

  2.2 初始化画布

2.2.1 创建canvas画布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>倒计时</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <canvas id='mycanvas' style="display: block; margin: 30px auto; border: 2px solid pink">
        当前浏览器不支持Canvas，请更换浏览器再试!
    </canvas>

    <!-- digit.js的内容是我们需要用到的数字和符号的点阵 -->
    <script src="digit.js"></script> 
    <!-- countdown.js是我们来处理这个项目的逻辑的文件 -->
    <script src="countdown2.js"></script>
</body>
</html>

2.2.2  设置画布的宽高

//设置一些全局变量，后面会多次用到
var WINDOW_WIDTH = 1024; //画布的宽度
var WINDOW_HEIGHT = 700; //画布的高度
var RADIUS = 8;          //绘制的一个个小圆球的半径
var MARGIN_LEFT = 30;    //绘制内容距离画布最左边的距离
var MARGIN_TOP = 60;     //绘制内容距离画布最上面的距离

window.onload = function(){

    //获取到canvas画布
    var canvas = document.getElementById('mycanvas');

    //获取到绘图的上下文环境
    var context = canvas.getContext('2d');

    //设置画布的宽高
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    //进行绘制
    render(context);
   
};

 

    此时运行html文件之后会看到一个处于屏幕中心的带有粉色边框的矩形区域，这个就是我们的canvas画布。

  2.3 绘制具体的数字

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][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, true);
                cxt.closePath();

                cxt.fill();
            }
        }
    }
};

 

    注意这里绘制小圆球时坐标的计算，我们这里小圆球的半径是RADIUS，但是为了美观，这里每个小正方形的边长是2*（RADIUS+1)，这样相邻的小圆球之间就会有一些间隙。

 

2.4 绘制时间

    既然知道了如何绘制一个具体的数字，那么绘制时间就很简单了，将时、分、秒对应的十位和个位的值计算出来，分别进行绘制就可以了，但是这里要注意，绘制的起始坐标的计算。每个数字都是一个十行七列的点阵，所以每个数字所占据的列数是14，同样的为了有一些间隙，我们将每个数字的列数设置为15。同样的由于冒号是十行四列，我们将它占据的列数设置为9。

//绘制的方法
function render(cxt){
    //1.刷新绘图环境
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);

    //2.获取到要绘制的时间
    var hour = 12;
    var minute = 34;
    var second = 56;

    //3.绘制具体数字
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hour/10), cxt);                   //小时的十位
    renderDigit(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(hour%10), cxt);   //小时的个位
    renderDigit(MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP, 10, cxt);                  //冒号
    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);                  //冒号
    renderDigit(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(second/10), cxt); //秒钟的十位
    renderDigit(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(second%10), cxt); //秒钟的个位

};

    此时运行我们的程序，会得到绘制出来的时间 12：34：56

 

  2.5 动态获取时间

    上面我们设置的是一个固定的时间，那么接下来我们动态的来获取倒计时的时间。先设置一个结束时间，然后通过结束时间与当前时间的减法运算获取到倒计时时间，由于当前时间是在变化的，所以得到的倒计时时间也是变化的。

    注意：我们这里由于小时只能显示两位数，所以最多只能设置99个小时的倒计时，所以结束时间不要设置的距离当前时间太久！

//获取时间的方法
const endTime = new Date(2019,7,28,21,0,0);

function getTime(){
    //获取到当前时间
    var curTime = new Date();

    //计算得出倒计时的时间(这里的单位是毫秒)
    var res = endTime.getTime() - curTime.getTime();

    //返回转换后的值
    res = parseInt(res/1000);
    return res >= 0 ? res : 0;

};

 

//更新时间的方法
function update(){
    //再次获取当前时间，通过与之前获取的时间进行对比，就可以知道时间是否发生了变化
    var nextTimeSeconds = getTime();

    var nextHour = parseInt(nextTimeSeconds/3600);
    var nextMinute = parseInt((nextTimeSeconds-nextHour*3600) / 60);
    var nextSecond = nextTimeSeconds % 60;

    var curHour = parseInt(curTimeSeconds/3600);
    var curMinute = parseInt((curTimeSeconds-curHour*3600) / 60);
    var curSecond = curTimeSeconds % 60;

    if( curSecond != nextSecond ){
        //时间发生了变化，故修改之前获取的时间
        curTimeSeconds = nextTimeSeconds;
    };

};

    动态地获取到时间后，我们要对两个地方进行修改。首先在window.onload函数里面开启一个定时器，这样就可以不断地重新绘制，就可以将动态获取的时间实时地绘制出来；然后就是我们在render方法里面，之前都是写的固定的时间，我们这里要将动态获取到的时间写进去。

var curTimeSeconds = 0  //提到前面，编程一个全局变量，因为后面有多个函数会用到这个变量

window.onload = function(){

    //获取到canvas画布
    var canvas = document.getElementById('mycanvas');

    //获取到绘图的上下文环境
    var context = canvas.getContext('2d');

    //设置画布的宽高
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    //获取到时间
    curTimeSeconds = getTime();

    //开启定时器
    setInterval(function(){
        //进行绘制
        render(context);
        //更新时间
        update();

    },50);
   
};
function render(cxt){
    //1.刷新绘图环境
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);

    //2.获取到要绘制的时间
    var hour = parseInt(curTimeSeconds/3600);
    var minute = parseInt((curTimeSeconds-hour*3600) / 60);
    var second = curTimeSeconds % 60;

    //3.绘制具体数字
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hour/10), cxt);                 
    renderDigit(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(hour%10), cxt);   
    renderDigit(MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP, 10, cxt);                  
    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);                  
    renderDigit(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(second/10), cxt); 
    renderDigit(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(second%10), cxt); 

};

    现在再运行项目，我们就可以看到以及实现了倒计时的效果，距离我们的目标，还剩下添加彩色的小球，以及使其运动起来。

 

  2.6 添加小球

    只有时间发生了变化的时候，我们才会添加小球，所以我们要在更新时间的update方法里面进行小球的添加。添加小球其实与之前绘制时间时的绘制小球的方法一致，所以我们要在render方法里面绘制添加的小球。那么我们如何在render方法里面获取到在update方法中添加的小球呢？

    方法就是我们设置一个全局变量balls，它是一个空数组，在update方法中添加小球时，我们用一个新的方法来专门实现小球的添加，这个方法里面，我们设置好每个小球的一些属性，让后将小球作为一个对象，添加到数组balls中，然后我们就可以在render方法中通过全局变量balls获取到添加的小球，从而进行绘制。

//更新时间的方法
function update(){
    //再次获取当前时间，通过与之前获取的时间进行对比，就可以知道时间是否发生了变化
    var nextTimeSeconds = getTime();

    var nextHour = parseInt(nextTimeSeconds/3600);
    var nextMinute = parseInt((nextTimeSeconds-nextHour*3600) / 60);
    var nextSecond = nextTimeSeconds % 60;

    var curHour = parseInt(curTimeSeconds/3600);
    var curMinute = parseInt((curTimeSeconds-curHour*3600) / 60);
    var curSecond = curTimeSeconds % 60;

    if( curSecond != nextSecond ){
        //添加小球

        //小时的十位发生了变化
        if( parseInt(curHour/10) != parseInt(nextHour/10) ){
            addBalls( MARGIN_LEFT + 0 , MARGIN_TOP , parseInt(curHour/10) );
        }

        //小时的个位发生了变化
        if( parseInt(curHour%10) != parseInt(nextHour%10) ){
            addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHour/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) );
        }
        
        //时间发生了变化，故修改之前获取的时间
        curTimeSeconds = nextTimeSeconds;
    };

};
var balls = [];  //用来存储小球
//存储一些颜色的值
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];
//添加小球的方法
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), //小球的纵坐标
                    color: colors[ Math.floor( Math.random()*colors.length ) ], //小球的颜色

                    //下面三个后面让小球运动起来会用到的一些属性
                    g:1.5+Math.random(),    //加速度    
                    //水平速度，这里的表达式的意思就是取负一的0到1000次方，然后再乘以4，最后的值就是4或者-4    
                    vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,  
                    vy:-5,  //初始的垂直速度
                }

                balls.push( aBall ) //将创建的小球对象放入数组中
            }
        }
    }
};
function render(cxt){
    //1.刷新绘图环境
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);

    //2.获取到要绘制的时间
    var hour = parseInt(curTimeSeconds/3600);
    var minute = parseInt((curTimeSeconds-hour*3600) / 60);
    var second = curTimeSeconds % 60;

    //3.绘制具体数字
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hour/10), cxt);                   //小时的十位
    renderDigit(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(hour%10), cxt);   //小时的个位
    renderDigit(MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP, 10, cxt);                  //冒号
    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);                  //冒号
    renderDigit(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(second/10), cxt); //秒钟的十位
    renderDigit(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(second%10), cxt); //秒钟的个位

    //4.绘制添加的小球
    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();
    }

};

    现在，我们就已经成功添加好了小球，但是现在是有问题的，因为我们只让小球显示出来了，但是没有让它运动起来，这样彩色小球就会覆盖住数字，那么接下来我们就让小球运动起来。

 

  2.7 让小球运动起来

    想让小球运动起来，我们只需要改变小球的坐标即可，但是这里如何去修改坐标，是有一定技巧的，我们在创建小球的时候有一些跟运动相关的属性，其实原理和初中物理学到的抛物线运动是一样的，具有一个水平速度，确保小球水平方向上的运动，我们设置的水平速度只有两个值4和-4，所以小球会向左或者向右运动，我们这里设置的初始垂直速度是一个负值，所以小球会先向上运动然后再向下。注意：为了达到我们预想的效果，我们这里需要设置一个碰撞检测，当小球碰到画布底部的时候，让他弹起，继续运动，直至在水平方向上运动到画布之外，这样就更真实一些。改变小球的运动状态也是一个更新的操作，所以我们放在update方法中进行。

//更新时间和小球运动状态的方法
function update(){
    //1.再次获取当前时间，通过与之前获取的时间进行对比，就可以知道时间是否发生了变化
    var nextTimeSeconds = getTime();

    var nextHour = parseInt(nextTimeSeconds/3600);
    var nextMinute = parseInt((nextTimeSeconds-nextHour*3600) / 60);
    var nextSecond = nextTimeSeconds % 60;

    var curHour = parseInt(curTimeSeconds/3600);
    var curMinute = parseInt((curTimeSeconds-curHour*3600) / 60);
    var curSecond = curTimeSeconds % 60;

    if( curSecond != nextSecond ){
        //添加小球
        if( parseInt(curHour/10) != parseInt(nextHour/10) ){
            addBalls( MARGIN_LEFT + 0 , MARGIN_TOP , parseInt(curHour/10) );
        }
        if( parseInt(curHour%10) != parseInt(nextHour%10) ){
            addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHour/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) );
        }

        //时间发生了变化，故修改之前获取的时间
        curTimeSeconds = nextTimeSeconds;
    };

    //2.改变小球运动状态
    updateBalls();

};
//更新小球运动状态的方法
function updateBalls(){

    for(var i=0; i<balls.length; i++){
        //1.改变小球的坐标
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;

        //2.碰撞检测
        if(balls[i].y >= WINDOW_HEIGHT - RADIUS){
            balls[i].y = WINDOW_HEIGHT - RADIUS;
            balls[i].vy = -balls[i].vy * 0.6;
        }

    };

};

    好的，到目前位为止，我们就已经实现了小球的动画效果了，但是，还有一个问题，那就是我们之前添加小球时根据时间的变化来添加的，时间是一直在变化的，所以小球就会一直不断地产生，但是我们却从来都没有删除过小球，所以小球就会越来越多，这是很占电脑内存的，越往后你就会发现电脑就会变卡。所以我们要将超出画布范围的小球清除掉。

function updateBalls(){
    var cnt = 0 ; //定义一个变量，用于小球的清除
    
    for(var i=0; i<balls.length; i++){
        //1.改变小球的坐标
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;

        //2.碰撞检测
        if(balls[i].y >= WINDOW_HEIGHT - RADIUS){
            balls[i].y = WINDOW_HEIGHT - RADIUS;
            balls[i].vy = -balls[i].vy * 0.6;
        }

        //3.清除超出画布范围的小球
        if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH){

            //将还在画布内的小球放到balls数组的最前面
            balls[cnt++] = balls[i];
        }

    };

    //在画布内的小球都放到了数组的前cnt个，所以后面的所有小球都是画布外的
    while(balls.length > cnt){
        balls.pop(); //删除数组末尾的一个元素
    }

};

    注意：这里cnt是从零开始的，所以balls[cnt++] = balls[i]这段代码，就将还在画布内的小球balls[i]，存储为balls[cnt]，cnt从零开始递增，那么符合要求的小球就都被排在了数组balls的最前面，所以只要是索引大于cnt的小球，都是已经超出画布范围的。

 

  2.8 屏幕自适应

  之前的画布的宽高以及小球半径的大小都是我们写的固定的值，现在我们通过公式换算，实现屏幕自适应。这里要注意将canvas的高设置为百分百，并且将前面设置的display、margin、border属性都删除，以及这里圆球半径的计算。

//设置一些全局变量，后面会多次用到
var WINDOW_WIDTH; //画布的宽度
var WINDOW_HEIGHT; //画布的高度
var RADIUS;          //绘制的一个个小圆球的半径
var MARGIN_LEFT;    //绘制内容距离画布最左边的距离
var MARGIN_TOP;     //绘制内容距离画布最上面的距离

var curTimeSeconds = 0  //提到前面，编程一个全局变量，因为后面有多个函数会用到这个变量

window.onload = function(){

    //获取到屏幕的宽高
    WINDOW_WIDTH = document.body.clientWidth;
    WINDOW_HEIGHT = document.body.clientHeight;
    
    //将两边的间距设置为屏幕宽度的十分之一，两边加起来就是五分之一了
    MARGIN_LEFT = parseInt(WINDOW_WIDTH/10);
    //用来绘制的宽度占总宽度的五分之四，前面我们计算出来的所有数字和冒号总共占据的列数位108
    //但是是108*（RADIUS+1), 所以不要忘记最后要减去一。
    RADIUS = parseInt(WINDOW_WIDTH*4/5/108) - 1;

    //将上方的间距设置为总高度的五分之一
    MARGIN_TOP = parseInt(WINDOW_HEIGHT/5);

    //获取到canvas画布
    var canvas = document.getElementById('mycanvas');

    //获取到绘图的上下文环境
    var context = canvas.getContext('2d');

    //设置画布的宽高
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    //获取到时间
    curTimeSeconds = getTime();

    //开启定时器
    setInterval(function(){
        //进行绘制
        render(context);
        //更新时间
        update();

    },50);
   
};

  好的，到目前为止，就算是大功告成了，我们炫酷的倒计时效果就出来了。

 

3.总结

  3.1 注意点

        3.1.1 小球的横纵坐标的计算

        3.1.2  数字和冒号占据的列数的计算

        3.1.3 小球的运动状态的变化，相关属性以及参数的设置

        3.1.4  小球的清除，变量cnt的作用

 

  3.2 扩展

        我们这里设置的结束时间是我们自己设定的，这样要是超过了这个时间，这个倒计时效果就不存在了，这样好像实用性不强，那么我们可不可以改造一下，使得每次运行，倒计时都是从一个小时开始呢？

        其实我们只要修改一些结束时间就可以了，将结束时间设置为当前时间的后面一个小时。

// const endTime = new Date(2019,7,28,21,0,0);
//设置时间为当前时间的后面一个小时
var endTime = new Date();
endTime.setTime(endTime.getTime() + 3600 * 1000); //这里要将一个小时代表的3600秒转化为毫秒，故乘以一千

//获取时间的方法
function getTime(){
    //获取到当前时间
    var curTime = new Date();

    //计算得出倒计时的时间(这里的单位是毫秒)
    var res = endTime.getTime() - curTime.getTime();

    //返回转换后的值
    res = parseInt(res/1000);
    return res >= 0 ? res : 0;

};

    这样每次运行，都是从一个小时开始倒计时，这样的话，就变得很实用了。其实我们还可以将其改造为一个时钟，显示当前时间，不过相比于一个小时倒计时，实用性还是差一些。如果改造成时钟的话，就不需要设置结束时间了。

// const endTime = new Date(2019,7,28,21,0,0);
/*
//设置时间为当前时间的后面一个小时
var endTime = new Date();
endTime.setTime(endTime.getTime() + 3600 * 1000); //这里要将一个小时代表的3600秒转化为毫秒，故乘以一千
*/

//获取时间的方法
function getTime(){
    //获取到当前时间，这里获取到的时间是距离1970年1月1日凌晨零点的毫秒数
    var curTime = new Date();

    //计算出当前时间一共有多少秒
    var res = curTime.getHours()*3600 + curTime.getMinutes()*60 + curTime.getSeconds();

    //返回得到的数值
    return res;

};

 

4. 源码（一小时倒计时的源码）

  4.1 html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>倒计时</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <canvas id='mycanvas' style="height:100%">
        当前浏览器不支持Canvas，请更换浏览器再试!
    </canvas>

    <!-- digit.js的内容是我们需要用到的数字和符号的点阵 -->
    <script src="digit.js"></script> 
    <!-- countdown.js是我们来处理这个项目的逻辑的文件 -->
    <script src="countdown2.js"></script>
</body>
</html>

 

  4.2 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]
    ] //冒号：
]

 

  4.3 countdown.js（逻辑处理）

//设置一些全局变量，后面会多次用到
var WINDOW_WIDTH; //画布的宽度
var WINDOW_HEIGHT; //画布的高度
var RADIUS;          //绘制的一个个小圆球的半径
var MARGIN_LEFT;    //绘制内容距离画布最左边的距离
var MARGIN_TOP;     //绘制内容距离画布最上面的距离

var curTimeSeconds = 0  //提到前面，变成一个全局变量，因为后面有多个函数会用到这个变量

//const endTime = new Date(2019,7,28,21,0,0); 这里月份是从零开始的，所以7代表八月
//设置结束时间为当前时间的后面一个小时
var endTime = new Date();
endTime.setTime(endTime.getTime() + 3600 * 1000); //这里要将一个小时代表的3600秒转化为毫秒，故乘以一千

var balls = [];  //用来存储小球
//存储一些颜色的值
const colors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];

window.onload = function(){

    //获取到屏幕的宽高
    WINDOW_WIDTH = document.body.clientWidth;
    WINDOW_HEIGHT = document.body.clientHeight;
    
    //将两边的间距设置为屏幕宽度的十分之一，两边加起来就是五分之一了
    MARGIN_LEFT = parseInt(WINDOW_WIDTH/10);
    //用来绘制的宽度占总宽度的五分之四，前面我们计算出来的所有数字和冒号总共占据的列数位108
    //但是是108*（RADIUS+1), 所以不要忘记最后要减去一。
    RADIUS = parseInt(WINDOW_WIDTH*4/5/108) - 1;

    //将上方的间距设置为总高度的五分之一
    MARGIN_TOP = parseInt(WINDOW_HEIGHT/5);

    //获取到canvas画布
    var canvas = document.getElementById('mycanvas');

    //获取到绘图的上下文环境
    var context = canvas.getContext('2d');

    //设置画布的宽高
    canvas.width = WINDOW_WIDTH;
    canvas.height = WINDOW_HEIGHT;

    //获取到时间
    curTimeSeconds = getTime();

    //开启定时器
    setInterval(function(){
        //进行绘制
        render(context);
        //更新时间、添加小球、改变小球运动状态
        update();

    },50);
   
};

//绘制的方法
function render(cxt){
    //1.刷新绘图环境
    cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);

    //2.获取到要绘制的时间
    var hour = parseInt(curTimeSeconds/3600);
    var minute = parseInt((curTimeSeconds-hour*3600) / 60);
    var second = curTimeSeconds % 60;

    //3.绘制具体数字
    renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hour/10), cxt);                   //小时的十位
    renderDigit(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(hour%10), cxt);   //小时的个位
    renderDigit(MARGIN_LEFT + 30*(RADIUS+1), MARGIN_TOP, 10, cxt);                  //冒号
    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);                  //冒号
    renderDigit(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(second/10), cxt); //秒钟的十位
    renderDigit(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(second%10), cxt); //秒钟的个位

    //4.绘制添加的小球
    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][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, true);
                cxt.closePath();

                cxt.fill();
            }
        }
    }
};

//获取时间的方法
function getTime(){
    //获取到当前时间，这里获取到的时间是距离1970年1月1日凌晨零点的毫秒数
    var curTime = new Date();

    //计算得出倒计时的时间(这里的单位是毫秒)
    var res = endTime.getTime() - curTime.getTime();

    //返回转换后的值
    res = parseInt(res/1000);
    return res >= 0 ? res : 0;

};

//更新时间和小球运动状态的方法
function update(){
    //1.再次获取当前时间，通过与之前获取的时间进行对比，就可以知道时间是否发生了变化
    var nextTimeSeconds = getTime();

    var nextHour = parseInt(nextTimeSeconds/3600);
    var nextMinute = parseInt((nextTimeSeconds-nextHour*3600) / 60);
    var nextSecond = nextTimeSeconds % 60;

    var curHour = parseInt(curTimeSeconds/3600);
    var curMinute = parseInt((curTimeSeconds-curHour*3600) / 60);
    var curSecond = curTimeSeconds % 60;

    if( curSecond != nextSecond ){
        //添加小球
        if( parseInt(curHour/10) != parseInt(nextHour/10) ){
            addBalls( MARGIN_LEFT + 0 , MARGIN_TOP , parseInt(curHour/10) );
        }
        if( parseInt(curHour%10) != parseInt(nextHour%10) ){
            addBalls( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHour/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) );
        }

        //时间发生了变化，故修改之前获取的时间
        curTimeSeconds = nextTimeSeconds;
    };

    //2.改变小球运动状态
    updateBalls();

};

//添加小球的方法
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), //小球的纵坐标
                    color: colors[ Math.floor( Math.random()*colors.length ) ], //小球的颜色

                    //下面三个后面让小球运动起来会用到的一些属性
                    g:1.5+Math.random(),    //加速度    
                    //水平速度，这里的表达式的意思就是取负一的0到1000次方，然后再乘以4，最后的值就是4或者-4    
                    vx:Math.pow( -1 , Math.ceil( Math.random()*1000 ) ) * 4,  
                    vy:-5,  //初始的垂直速度
                }

                balls.push( aBall ) //将创建的小球对象放入数组中
            }
        }
    }
};

//更新小球运动状态的方法
function updateBalls(){
    var cnt = 0 ; //定义一个变量，用于小球的清除
    
    for(var i=0; i<balls.length; i++){
        //1.改变小球的坐标
        balls[i].x += balls[i].vx;
        balls[i].y += balls[i].vy;
        balls[i].vy += balls[i].g;

        //2.碰撞检测
        if(balls[i].y >= WINDOW_HEIGHT - RADIUS){
            balls[i].y = WINDOW_HEIGHT - RADIUS;
            balls[i].vy = -balls[i].vy * 0.6;
        }

        //3.清除超出画布范围的小球
        if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH){

            //将还在画布内的小球放到balls数组的最前面
            balls[cnt++] = balls[i];
        }

    };

    //在画布内的小球都放到了数组的前cnt个，所以后面的所有小球都是画布外的
    while(balls.length > cnt){
        balls.pop(); //删除数组末尾的一个元素
    }

};

        

Libra0809
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用canvas画一个炫酷的粒子动画倒计时
小陈的博客
02-28 3097
canvas是HTML5中新增的一个标签，主要是用于网页实时生成图像并可操作图像，它是用JavaScript操作的bitmap。🤨 在JavaScript中定义所需的变量numberStage - stageCenterY 这一块主要是定义画布宽高和坐标countdownFrom 从 10 开始倒计时countdownTimer 数字显示的时长countdownRunning 动起来colors 页面上所有粒子颜色其他的可以自己理解一下哦~
使用canvas实现倒计时效果
JiangLittleBai的博客
01-18 3221
假设现在离新闻联播开始还有3分钟21秒。现在要通过canvas实现这个以03:21开始以00：00结束的倒计时。问题的关键在于，如何通过canvas绘制03:21 、02:36。简化问题，我们可以使用canvas绘制0、3、"："、2、1形状的图画，时间改变，再次重新绘制即可。绘制数字和符号“：”以绘制数字0为例，0的绘制可以借助一个二维数组。 var arc=[ [0,0,1,1,1,0
HTML5 Canvas 3D倒计时爆炸特效特效代码
03-20
这款HTML5 3D动画特效非常给力，它是一个基于Canva 的倒计时爆炸效果，随着时间的走动，时间数字傍边就会有爆炸的特效，一群像素点就会在数字中心爆发出来，感觉非常酷。而且应用了 HTML5 的 3D 特性，让整一个时钟显得非常有立体感。本段代码兼容目前最新的
【canvas】canvas的基础使用（一）：创建canvas
最新发布
qq_2511276124的博客
04-08 937
Canvas API 提供了一个通过JavaScript 和 HTML的\元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API 主要聚焦于 2D 图形。
canvas绘制倒计时
风舞红枫的个人博客
03-05 500
canvas绘制倒计时
Canvas学习笔记——学习使用Canvas做出炫丽的时钟或倒计时效果/小球掉落效果
没沙发
09-11 635
是在慕课网上跟着这位老师的课程完成的——炫丽的倒计时效果Canvas绘图与动画基础 Canvas倒计时效果预览图 实现难点 这个小动画中需要用到的Canvas知识和Api可以参考我的另一篇博文：Canvas学习笔记——Canvas常用API方法 1、如何用小球把数字绘制出来 我们把数字变为了一个里面只有0和1的数组，1就代表小球出现的位置。如下所示。 将0-9十个数组组成的大数组命名为D...
基于canvas制作绚丽的倒计时效果
AFeng521web
08-30 795
基于canvas制作绚丽的倒计时效果 一、先看下效果 二、canvas是一个可是使用脚本（通常是javascript）在其中绘制图形的HTML元素，同时canvas也是定义在浏览器上的画布，canvas不仅仅像p标签等是一个元素，更是一个编辑工具，是一套编程接口，它的出现已超过了web基于文本设计的初衷。canvas可以设计出绚丽多彩的动画，奇妙的游戏等，可以使我们的网页绚丽多彩！ 三...
canvas彩色倒计时效果
05-08
canvas彩色倒计时效果 依据canvas画布效果 实现的时间倒计时 可自己设定需要的画布大小 倒计时时钟位置 需要的倒计时时间 在秒数的切换时 会动态的更新彩色效果 适合放置到个人小站或者一些炫酷的页面中使用
精品源码 / 倒计时 / 炫酷 / canvas特效
01-09
1、这是一款炫酷canvas倒计时特效 2、圆形的进度条让你一眼就知道时间的流逝 3、界面炫酷、充满了科技感，十七款样式任君选择 4、收费只是想让你们知道资源得来不易
vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
10-17
首先，实现这个炫酷时钟倒计时效果的核心是Canvas的动画原理。通过定时器（通常使用`requestAnimationFrame`）周期性地清空画布并重新绘制图形，从而产生连续的视觉效果。在倒计时过程中，图形的变化（如颜色和速度...
html5倒计时制作酷炫的canvas粒子动画倒计时代码
11-10
html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码
基于vue2的canvas时钟倒计时组件步骤解析
10-17
今天给大家介绍一款基于vue2的canvas时钟倒计时组件，这个时钟倒计时组件采用canvas动画的炫酷动画效果形式，根据剩余时间的多少变换颜色和旋转扇形的速度，适合抢购、拍卖、下注等业务场景，且对移动端友好,需要的...
HTML华丽倒计时特效（可扩展）
08-10
THANK YOU YOUR
html倒计时小工具
09-29
canvas绘制的炫酷倒计时工具，可以自定义倒计时分钟数。
分享8个难忘的HTML5炫酷动画及
08-23
HTML5的强大之处不仅在于让网页元素更加灵活多变，更在于它可以很方便地实现各种网页动画特效，让你的网站更加富有现代化特色。就现在的浏览器而言，已经基本都支持HTML5了，所以这也方便了我们开发者免去了考虑...
爱心特效,花瓣表白html,樱花飞舞炫酷加载,在线留言评论
08-06
表白代码,canvas绘制全屏爱心,各种特效,支持游客留言,爱情计时,爱情相册,爱情时间轴,详情可以看我置顶博客预览效果.
canvas绘画时钟及倒计时时钟
weixin_30273175的博客
06-04 293
因为偶是一个前端小白，所以呢！！！！想要把自己在网上看的代码，并且自己敲了一遍，做了注释分享给大家~~~不喜勿喷，谢谢哟！我是super喵二（程序媛），大家一起成长！！！ 倒计时时钟（先放效果图）（好吧我这里不是倒计时，是普通时钟，不过一会放上代码里不仅有倒计时也有时间，自行发现）： 大概思路：1、0-9的数字以及冒号绘制，定义一个二维数组，每一个数字对应一个数组，1代表画圆，0不画。 ...
h5 canvas绘制电子数字时钟
henly1217的专栏
01-12 458
使用h5的canvas绘制电子数字时钟
用HTML5 Canvas绘制时钟
weixin_63929524的博客
06-28 761
HTML5的Canvas元素提供了一种在网页上绘制图形的强大方式。结合JavaScript，我们可以使用Canvas绘制出各种图形，包括时钟。本文将介绍如何使用Canvas和JavaScript来实现一个时钟，以及每个步骤的思路和实现方法。通过使用HTML5 Canvas和JavaScript，我们可以轻松地实现一个简单的时钟。本文介绍了绘制时钟所需的HTML结构和JavaScript代码，并详细解释了每个步骤的实现思路。你可以在此基础上进一步扩展和美化时钟的样式，实现更多功能，如。
canvas 实现倒计时三秒钟
04-04
以下是使用 canvas 实现三秒钟倒计时的示例代码： HTML: ``` <canvas id="countdown" width="200" height="200"></canvas> ``` JavaScript: ``` var canvas = document.getElementById("countdown"); var ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值