×

用canvas做一个酷炫的倒计时效果

作者:ceshi2018.12.11来源:Web前端之家浏览:10842评论:0
关键词:canvas倒计时

用canvas做一个酷炫的倒计时效果,一起来看下咯。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>

    <body style="height: 100%;width: 100%;">
        <canvas id="canvas"></canvas>
    </body>

    <script type="text/javascript">
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]
        ]//:
    ];

</script>
    <script>
        var WINDOW_WIDTH = 1024;
        var WINDOW_HEIGHT = 768;
        var R = 8;
        var MARGIN_TOP = 60;
        var MARGIN_LEFT = 30;

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

        const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"];
        var balls = [];
        window.onload = function() {
            WINDOW_WIDTH = document.body.clientWidth
            WINDOW_HEIGHT = document.body.clientHeight

            MARGIN_LEFT = Math.round(WINDOW_WIDTH / 10);
            R = Math.round(WINDOW_WIDTH * 4 / 5 / 108) - 1;
            MARGIN_TOP = Math.round(WINDOW_HEIGHT / 5);
            //使用context绘制
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d")

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

            curShowTimeSeconds = getCurrenShowTimeSeconds();

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

            //获取截止时间
            function getCurrenShowTimeSeconds() {
                var curTime = new Date();
                //倒计时       var ret = endTime.getTime() - curTime.getTime();
                //          ret = Math.round(ret / 1000)
                //          return ret >= 0 ? ret : 0;
                var ret = curTime.getHours() * 3600 + curTime.getMinutes() * 60 + curTime.getSeconds();
                return ret;
            }
            //
            function update() {

                var nextShowTimeSeconds = getCurrenShowTimeSeconds();

                var nh = parseInt(nextShowTimeSeconds / 3600);
                var nm = parseInt((nextShowTimeSeconds - nh * 3600) / 60);
                var ns = nextShowTimeSeconds % 60;

                var ch = parseInt(curShowTimeSeconds / 3600);
                var cm = parseInt((curShowTimeSeconds - ch * 3600) / 60);
                var cs = curShowTimeSeconds % 60;

                if(ns != cs) {
                    if(parseInt(ch / 10) != parseInt(nh / 10)) {
                        addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(ch / 10))
                    }
                    if(parseInt(ch % 10) != parseInt(nh % 10)) {
                        addBalls(MARGIN_LEFT + 15 * (R + 1), MARGIN_TOP, parseInt(ch / 10))
                    }

                    if(parseInt(cm / 10) != parseInt(nm / 10)) {
                        addBalls(MARGIN_LEFT + 39 * (R + 1), MARGIN_TOP, parseInt(cm / 10))
                    }
                    if(parseInt(cm % 10) != parseInt(nm % 10)) {
                        addBalls(MARGIN_LEFT + 54 * (R + 1), MARGIN_TOP, parseInt(cm % 10))
                    }

                    if(parseInt(cs / 10) != parseInt(ns / 10)) {
                        addBalls(MARGIN_LEFT + 78 * (R + 1), MARGIN_TOP, parseInt(cs / 10))
                    }
                    if(parseInt(cs % 10) != parseInt(ns % 10)) {
                        addBalls(MARGIN_LEFT + 93 * (R + 1), MARGIN_TOP, parseInt(ns % 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 - R) {
                        balls[i].y = WINDOW_HEIGHT - R;
                        balls[i].vy = -balls[i].vy * 0.75;
                    }

                }
                var cnt = 0
                for(var i = 0; i < balls.length; i++)
                    if(balls[i].x + R > 0 && balls[i].x - R < 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][i].length; j++)
                        if(digit[num][i][j] == 1) {
                            var aBall = {
                                x: x + j * 2 * (R + 1) + (R + 1),
                                y: y + i * 2 * (R + 1) + (R + 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 h = parseInt(curShowTimeSeconds / 3600);
                var m = parseInt((curShowTimeSeconds - h * 3600) / 60);
                var s = curShowTimeSeconds % 60;

                renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(h / 10), cxt);
                renderDigit(MARGIN_LEFT + 15 * (R + 1), MARGIN_TOP, parseInt(h % 10), cxt);
                renderDigit(MARGIN_LEFT + 30 * (R + 1), MARGIN_TOP, 10, cxt);
                renderDigit(MARGIN_LEFT + 39 * (R + 1), MARGIN_TOP, parseInt(m / 10), cxt);
                renderDigit(MARGIN_LEFT + 54 * (R + 1), MARGIN_TOP, parseInt(m % 10), cxt);
                renderDigit(MARGIN_LEFT + 69 * (R + 1), MARGIN_TOP, 10, cxt);
                renderDigit(MARGIN_LEFT + 78 * (R + 1), MARGIN_TOP, parseInt(s / 10), cxt);
                renderDigit(MARGIN_LEFT + 93 * (R + 1), MARGIN_TOP, parseInt(s % 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, R, 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 * (R + 1) + (R + 1), y + i * 2 * (R + 1) + (R + 1), R, 0, 2 * Math.PI
                            );
                            cxt.closePath();
                            cxt.fill();
                        }
            }
        }
    </script>

</html>


您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/cavast234234235523.html

网友评论文明上网理性发言 已有0人参与

发表评论: