canvas制作倒计时炫丽效果

时间：2022-07-04 11:04:35
<!DOCTYPE html>

<head>

<title>canvas倒计时</title>

<style>

.canvas{

   display: block;

   border: 1px solid #000;

   margin: 50px auto;

}

</style>

</head>

<body>

<canvas class="canvas" id="canvas"></canvas>

<script>

var 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,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]

    ], //

    [

       [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]

    ], //

    [

       [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]

    ], //

    [

       [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],

       [1,1,0,0,1,1,0],

       [0,0,0,1,1,1,1]

    ], //

    [

       [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]

    ], //

    [

       [0,0,0,0,1,1,1],

       [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]

    ], //

    [

       [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]

    ], //

    [

       [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]

    ], //

    [

       [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]

    ], //

    [

       [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 WINDOW_HEIGHT = 468;

var WINDOW_WIDTH = 1024;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

//const endTime = new Date(2017,1,03,28,18,09);

var endTime = new Date();

    endTime.setTime(endTime.getTime()+3600*1000);

var curShowTimeSeconds = 0;

var balls = [];

var colors = ['#33B5E5','#0099CC','#AA66CC','#9933CC','#99CC00','#669900','#FF8800','FF8888','#CC0000'];

window.onload = function(){

     var canvas = document.getElementById('canvas');

     var cxt = canvas.getContext('2d');

     canvas.height = WINDOW_HEIGHT;

     canvas.width = WINDOW_WIDTH;

     curShowTimeSeconds = getCurrentShowTimeSeconds();

     setInterval(function(){

          render(cxt);

          update();

     },50);

}

function getCurrentShowTimeSeconds(){

     var curTime = new Date();

     var ret = endTime.getTime() - curTime.getTime();

     ret = Math.round(ret/1000);

     return ret >=0? ret : 0;

}

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(curSeconds%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 >= canvas.height -RADIUS){

            balls[i].y = canvas.height - RADIUS;

            balls[i].vy = -balls[i].vy*0.65; //加一个摩擦力系数

         }

   }

   var cnt = 0;

   for(var i= 0; i< balls.length; i++){

       if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < 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*(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,

                 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();

              }

        }

     }

}

</script>

</body>

</html>
<!DOCTYPE html>

<head>

<title>canvas倒计时</title>

<style>

.canvas{

   display: block;

   border: 1px solid #000;

   margin: 50px auto;

}

</style>

</head>

<body>

<canvas class="canvas" id="canvas"></canvas>

<script>

   var ball = {x: 512, y:100, r:20, g:2, vx: -1, vy: 0, color: '#005588'};

   window.onload = function(){

         var canvas = document.getElementById('canvas');

         var cxt = canvas.getContext('2d');

         canvas.width = 1024;

         canvas.height = 468;

         setInterval(function(){

              render(cxt);

              update();

         },50);

   }

   function update(){

         ball.x += ball.vx;

         ball.y += ball.vy;

         ball.vy += ball.g;

   }

   function render(cxt){

         cxt.clearRect(0,0,cxt.canvas.width,canvas.height);

         cxt.fillStyle = ball.color;

         cxt.beginPath();

         cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);

         cxt.closePath();

         cxt.fill();

   }

</script>

</body>

</html>
<!DOCTYPE html>

<head>

<title>canvas倒计时</title>

<style>

.canvas{

   display: block;

   border: 1px solid #000;

   margin: 50px auto;

}

</style>

</head>

<body>

<canvas class="canvas" id="canvas"></canvas>

<script>

var 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,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]

    ], //

    [

       [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]

    ], //

    [

       [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]

    ], //

    [

       [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],

       [1,1,0,0,1,1,0],

       [0,0,0,1,1,1,1]

    ], //

    [

       [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]

    ], //

    [

       [0,0,0,0,1,1,1],

       [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]

    ], //

    [

       [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]

    ], //

    [

       [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]

    ], //

    [

       [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]

    ], //

    [

       [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 WINDOW_HEIGHT = 468;

var WINDOW_WIDTH = 1024;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

const endTime = new Date(2017,1,03,28,18,09);

var curShowTimeSeconds = 0;

window.onload = function(){

     var canvas = document.getElementById('canvas');

     var cxt = canvas.getContext('2d');

     canvas.height = WINDOW_HEIGHT;

     canvas.width = WINDOW_WIDTH;

     curShowTimeSeconds = getCurrentShowTimeSeconds();

     setInterval(function(){

          render(cxt);

          update();

     },50);

}

function getCurrentShowTimeSeconds(){

     var curTime = new Date();

     var ret = endTime.getTime() - curTime.getTime();

     ret = Math.round(ret/1000);

     return ret >=0? ret : 0;

}

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){

         curShowTimeSeconds = nextShowTimeSeconds;

     }

}

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);

}

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();

              }

        }

     }

}

</script>

<script>

   var ball = {x: 512, y:100, r:20, g:2, vx: -1, vy: 0, color: '#005588'};

   window.onload = function(){

         var canvas = document.getElementById('canvas');

         var cxt = canvas.getContext('2d');

         canvas.width = 1024;

         canvas.height = 468;

         setInterval(function(){

              render(cxt);

              update();

         },50);

   }

   function update(){

         ball.x += ball.vx;

         ball.y += ball.vy;

         ball.vy += ball.g;

         if(ball.y >= canvas.height -ball.r){

            ball.y = canvas.height - ball.r;

            ball.vy = -ball.vy*0.6; //加一个摩擦力系数

         }

   }

   function render(cxt){

         cxt.clearRect(0,0,cxt.canvas.width,canvas.height);

         cxt.fillStyle = ball.color;

         cxt.beginPath();

         cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);

         cxt.closePath();

         cxt.fill();

   }

</script>

</body>

</html>

canvas制作倒计时炫丽效果

相关文章