>炫酷的计时器效果Canvas绘图与动画<

>炫丽的计时器效果Canvas绘图与动画<

虽然我是学习java的，但是因为最近使用html5的关系，多学习了一下前端知识。

现在，我要介绍的计时器是十分炫酷的，使用画布完成。

喜欢html5和喜欢炫酷特效的同学可以收藏一下。

-----------------------------------------华丽的分割线----------------------------------------------------

首先，介绍一下文件的效果。

看起来是非常的炫酷的。

-----------------------------------------下面是代码部分，代码注释得很清楚了，就不多废话了----------------------------------------------------

index.html ->

DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>炫丽的计时器效果-Canvas绘图与动画-title>
<script src="js/countdown.js">script>
<script src="js/digit.js">script>
head>
<body style="height:100%;width:100%;">
<canvas id="canvas" style="height:100%;width:100%;">canvas>
body>
html>

countdown.js ->

var window_width = 1440;/*页面的宽度*/
var window_height = 900;/*页面的高度*/
var radius = 8;/*小球的半径*/
var margin_top = 60;/*元素的上外边距*/
var margin_left = 30;/*元素的左外边距*/

var curShowTimeSeconds = 0;/*获取当天的秒数*/

var balls = [];/*小球的集合*/
const colors = ["#33b5e5","#0099cc","#aa66cc","#9933cc","#99cc00","#669900","#ffbb33","#ff8800","#ff4444","#cc0000"];/*颜色集合*/

window.onload = function(){
/*判断是否支持canvas,
 * 初始化页面*/
    window_width = document.body.clientWidth;
    window_height = document.body.clientHeight;


    margin_left = Math.round(window_width/10);
    radius = Math.round(window_width*4/5/108)-1;

    margin_top = Math.round(window_height/5);

    /*获取canvas对象*/
    var canvas = document.getElementById("canvas");    
    /*判断浏览器是否支持Canvas*/
    if(canvas.getContext("2d")){
        var context = canvas.getContext("2d");
        /*使用context绘制*/
    }else{
        alert("当前浏览器不支持Canvas，请更换浏览器后再试");
    }

    canvas.width = window_width;
    canvas.height = window_height;

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

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 = nextShowTimeSeconds%60;

    var curHours = parseInt(curShowTimeSeconds/3600);
    var curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60);
    var curSeconds = 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(nextSeconds%10));
        }

        curShowTimeSeconds = nextShowTimeSeconds;
    }

    updateBalls();
}

function updateBalls(){
    /*更新小球*/
    for(var i=0;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 count = 0;
    for(var i=0;i){
        if(balls[i].x+radius>0 && balls[i].x - radius < window_width){
            balls[count++] = balls[i];
        }
    }
    while(balls.length>Math.min(300,count)){
        balls.pop();
    }
}
function addBalls(x,y,num){
/*增加数字变化时跳动的小球*/
    for(var i=0;i){
        for(var j=0;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,  //取-1或者1
                    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){
        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){
        for(var j=0;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.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]
        ]/*:*/
    ];

------------------------------如果大家喜欢，请加关注，谢谢------------------------------------

HTML5 JavaScript 计时器 canvas绘图动画

>炫酷的计时器效果Canvas绘图与动画<

相关

flutter 按钮弹簧动画AnimationController

javascript基础知识(29) 实现继承的方式

AE脚本人物面部自动对口型动画 Talking Head

直播电商源码，活动开始时间计时器

02_使用jq实现进入和离开动画

7个有用的JavaScript技巧

HTML5新增

JavaScript跳出嵌套循环

JavaScript常用对象介绍

JavaScript学习day03

推荐12个最好的 JavaScript 图形绘制库

javascript模板字符串（反引号）

标签