绚丽的小球时间跳动

Html

Css

#canvas {
	margin:0 auto;
}

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]
    ] //:
];

var showtime = (function() {
    var balls = [];
    //记录历史时间
    var hover1 = 99;
    var hover2 = 99;
    var minutes1 = 99;
    var minutes2 = 99;
    var seconds1 = 99;
    var seconds2 = 99;

function render(canvas) {
        var myDate = new Date(); //获取系统当前时间
        var hours = myDate.getHours();
        var minutes = myDate.getMinutes();
        var seconds = myDate.getSeconds();
        //对一个矩形空间内绘制的图形进行刷新操作
        canvas.context.clearRect(0, 0, canvas.CWIDTH, canvas.CHIGHT);

//创建小球
        //现在的时间和一起的时间对比，判断是否改变，时间的改变会生成新的小球
        if (parseInt(hours / 10) != hover1) {
            addballs(canvas.M_l, canvas.M_t, parseInt(hours / 10), canvas);
        }
        if (parseInt(hours % 10) != hover2) {
            addballs(canvas.M_l + 16 * (canvas.r + 1), canvas.M_t, parseInt(hours % 10), canvas);
        }
        if (parseInt(minutes / 10) != minutes1) {
            addballs(canvas.M_l + 40 * (canvas.r + 1), canvas.M_t, parseInt(minutes / 10), canvas);
        }
        if (parseInt(minutes % 10) != minutes2) {
            addballs(canvas.M_l + 56 * (canvas.r + 1), canvas.M_t, parseInt(minutes % 10), canvas);
        }
        if (parseInt(seconds / 10) != seconds1) {
            addballs(canvas.M_l + 80 * (canvas.r + 1), canvas.M_t, parseInt(seconds / 10), canvas);
        }
        if (parseInt(seconds % 10) != seconds2) {
            addballs(canvas.M_l + 96 * (canvas.r + 1), canvas.M_t, parseInt(seconds % 10), canvas);
        }

//分开画每一个数字及符号
        //该数字开始的坐标X,Y,该数字，CTX
        renderDiget(canvas.M_l, canvas.M_t, parseInt(hours / 10), canvas);
        renderDiget(canvas.M_l + 16 * (canvas.r + 1), canvas.M_t, parseInt(hours % 10), canvas);
        renderDiget(canvas.M_l + 32 * (canvas.r + 1), canvas.M_t, 10, canvas, false);
        renderDiget(canvas.M_l + 40 * (canvas.r + 1), canvas.M_t, parseInt(minutes / 10), canvas);
        renderDiget(canvas.M_l + 56 * (canvas.r + 1), canvas.M_t, parseInt(minutes % 10), canvas);
        renderDiget(canvas.M_l + 72 * (canvas.r + 1), canvas.M_t, 10, canvas, false);
        renderDiget(canvas.M_l + 80 * (canvas.r + 1), canvas.M_t, parseInt(seconds / 10), canvas);
        renderDiget(canvas.M_l + 96 * (canvas.r + 1), canvas.M_t, parseInt(seconds % 10), canvas);

//记录当前的时间,下次使用时作为过去的时间
        hover1 = parseInt(hours / 10);
        hover2 = parseInt(hours % 10);
        minutes1 = parseInt(minutes / 10);
        minutes2 = parseInt(minutes % 10);
        seconds1 = parseInt(seconds / 10);
        seconds2 = parseInt(seconds % 10);
    }
    //数字的具体绘制，根据che判断是否需要刷新颜色
    function renderDiget(x, y, num, canvas) {
        var ctx = canvas.context;
        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) {
                    ctx.beginPath();
                    ctx.arc(x + j * 2 * (canvas.r + 1) + (canvas.r + 1), y + i * 2 * (canvas.r + 1) + (canvas.r + 1), canvas.r, 0, 2 * Math.PI);
                    ctx.closePath();
                    ctx.fillStyle = canvas.ballcolor;
                    ctx.fill();
                }
            }
        }
    }
    //当时间发生变化时，生成小球数组，追加最新的小球
    function addballs(x, y, num, canvas) {
        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 ball = {
                        x: x + j * 2 * (canvas.r + 1) + (canvas.r + 1),
                        y: y + i * 2 * (canvas.r + 1) + (canvas.r + 1),
                        color: canvas.color[Math.floor(Math.random() * canvas.color.length)],
                        g: 1.5 + Math.random(),
                        vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4,
                        vy: -1,
                    };
                    balls.push(ball);
                }
            }
        }

}
    //动画每一帧更新一次小球 计算 小球的速度，X速度,Y速度，以及XY坐标
    function updata(canvas) {
        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 >= canvas.CHIGHT) {
                balls[i].y = canvas.CHIGHT;
                balls[i].vy = -balls[i].vy * canvas.rebound;
            }
        }
        //判断每个小球是否在绘制板内，对于超出的小球采取删除操作
        var cnt = 0;
        for (var j = 0; j < balls.length; j++) {
            if (balls[j].x + canvas.r > 0 && balls[j].x - canvas.r < canvas.CWIDTH) {
                //这种重组方法比较快捷，比如该数组有100个元素，从0-99中，有50个有用的，我们把有用的全部集中放在0-49，那么之前的0-49
                //被新的元素覆盖掉，50-99中依然存在有用的元素，不过被复制到了0-49中，所以50-99用不着了，采用下面的方法删除。
                balls[cnt++] = balls[j]; //用cnt重组数组，该数组内的小球都是有用的
            }
        }
        //这里可以放心，ball(cnt-1)前的元素皆为有效的
        while (balls.length > cnt) {
            balls.pop();
        }
    }
    //绘制小球   根据小球当前数组的最新只  循环输出已经生成的 小球的最新位置
    function drawball(canvas) {
        var ctx = canvas.context;
        for (var i = 0; i < balls.length; i++) {
            ctx.beginPath();
            ctx.arc(balls[i]["x"], balls[i]["y"], canvas.r, 0, 2 * Math.PI);
            ctx.closePath();
            ctx.fillStyle = balls[i]['color'];
            ctx.fill();
        }
    }
    return ini;
})()
window.onload = function() {
    var time_config = {
        r: 7, //小球半径
        M_l: 110, //左边距
        M_t: 100, //顶部距离
        CWIDTH: 1200, //画布宽度
        CHIGHT: 600, //画布高度
        color: [
            "772e",
            "#3f4177",
            "#ffb6f6",
            "#3c97ff",
            "#ff226c",
            "#ff7a51",
            "#3c97ff",
            "#ff226c",
            "7bff",
            "#ff3ebf",
            "ff4b",
        ],
        ballcolor: "#161837", //时间小球颜色
        rebound: 0.2, //掉落底部反弹系数
    };
    showtime(time_config);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.1.4

立即下载

绚丽的小球时间跳动



代码描述：实时更新时间，时间的转换会生成小球掉落，掉落的小球遵守物理运动规则

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

pre.

相关代码

绚丽的小球时间跳动

最新