>炫酷的計時器效果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.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.75;
        }
    }

    /*性能優化*/
    var count = 0;
    for(var i=0;i<balls.length;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<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),
                    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<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);
                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]
        ]/*:*/
    ];

------------------------------如果大家喜歡，請加關注，謝謝------------------------------------

posted @ 2016-07-13 10:54 時光之夢閱讀(1115) 評論(0) 收藏舉報

刷新頁面返回頂部

loce

>炫酷的計時器效果Canvas繪圖與動畫<

公告