canvas之动态时间

最新推荐文章于 2024-10-15 14:00:48 发布

weixin_34239592

最新推荐文章于 2024-10-15 14:00:48 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mengyusunfang/archive/2011/12/07/2279183.html

版权

<!DOCTYPE HTML>
<html>
<head>
<title>Html5 Canvas Animations 3</title>
</head>
<body οnlοad="init()" >
<canvas id="c" width="400" height="200"></canvas>
<script type="text/javascript">
var ctx;

function init(){
ctx = document.getElementById('c').getContext('2d');
setInterval(draw,1000);
}

function draw(){
ctx.clearRect(0,0,400,200);
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr = now.getHours();

  sec = sec < 10 ? '0'+sec : sec;
  min = min < 10 ? '0'+min : min;
  hr = hr < 10 ? '0'+hr : hr;

  sec = new String(sec);
  min = new String(min);
  hr = new String(hr);

  //hr
   showNumber(hr.substr(0,1),50,50);
   showNumber(hr.substr(1,1),100,50);
   showNumber('.',160,70);
   showNumber('.',160,90);
  //min
   showNumber(min.substr(0,1),170,50);
   showNumber(min.substr(1,1),220,50);
   showNumber('.',280,70);
   showNumber('.',280,90);
  //sec
   showNumber(sec.substr(0,1),290,50);
   showNumber(sec.substr(1,1),340,50);
}

function showNumber(n,x,y){
var img = new Image();
img.src = 'images/numbers.jpg';

  switch (n)
  {
  case '.':
   ctx.drawImage(img,69,54,10,10,x,y,10,10);
   break;
  case '1':
   ctx.drawImage(img,0,0,110,174,x,y,50,60);
   break;
  case '2':
   ctx.drawImage(img,110,0,110,174,x,y,50,60);
   break;
        case '3':
   ctx.drawImage(img,220,0,110,174,x,y,50,60);
   break;
  case '4':
   ctx.drawImage(img,330,0,110,174,x,y,50,60);
   break;
  case '5':
   ctx.drawImage(img,450,0,110,174,x,y,50,60);
   break;
        case '6':
   ctx.drawImage(img,0,174,120,174,x,y,50,60);
   break;
        case '7':
   ctx.drawImage(img,120,174,110,174,x,y,50,60);
   break;
        case '8':
   ctx.drawImage(img,230,174,110,174,x,y,50,60);
   break;
  case '9':
   ctx.drawImage(img,340,174,110,174,x,y,50,60);
   break;
     default:
     ctx.drawImage(img,460,174,120,174,x,y,59,60);
  }
}
</script>
</body>
</html>