canvas制作倒计时炫丽效果

首页 > 代码库 > canvas制作倒计时炫丽效果

canvas制作倒计时炫丽效果

2024-09-02 18:27:53 222人阅读

<!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>

View Code

<!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,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],
       [1,1,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,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]
    ], //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 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>

View Code

canvas制作倒计时炫丽效果

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > canvas制作倒计时炫丽效果

canvas制作倒计时炫丽效果

看完仍有疑问？有类似问题直接问程序猿