注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

HTML5 Canvas 简单动画练习 数字时钟  

2011-04-09 21:38:32|  分类: Html5 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

数字时钟

1.先找一个关于数字的图片

  HTML5 Canvas 简单动画练习 数字时钟 - zhenghaoju700 - zhenghaoju700 的博客?

2.根据图片用drawImage方法把所有数字截取下来

如下所示

 数字1  ctx.drawImage(img,0,0,110,174,x,y,50,60);

 数字5  ctx.drawImage(img,450,0,110,174,x,y,50,60);

 

这样你就可以写一个switch case 对数字进行判断,决定显示哪个数字

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;

    省略 。。。 。。。

default:

    ctx.drawImage(img,460,174,120,174,x,y,59,60);

}

 

3.拿到当前时间

var now = new Date();

var sec = now.getSeconds();

var min = now.getMinutes();

var hr  = now.getHours();

4.根据时间去显示相应的数字

 

5.每隔一秒去刷Canavas

 setInterval(draw,1000);

 

代码

<!DOCTYPE HTML>

<html>

<head>

<title>Html5 Canvas Animations 3</title>

</head>

<body onload="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>

 

效果截图

  HTML5 Canvas 简单动画练习 数字时钟 - zhenghaoju700 - zhenghaoju700 的博客?

示例页面下载 http://download.csdn.net/source/3175912

 

 

 

  评论这张
 
阅读(669)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017