[ 登录注册 ]

HTML5

用HTML5做个时钟

2016/08/17 14:09 [db:作者] 返回上一页

心情不好,游戏不想玩,弄个小东西排解一下心中的不畅: 
本时钟是通过HTML5的Canvas实现的,相关的技术大家可以到这儿去看看: 链接地址  
下面就没有什么好所的了,上面的链接中有详细的说明,有图有真相 ~~ 
\ 



下面是代码:
001  <html>
002      <head>
003          <title>HTML5 Test</title>
004          <script type="application/x-javascript">
005              var panel, ctx, img;
006              var pw, ph, ox, oy;
007              function init(){
008                  panel = document.getElementById("panel");
009                  pw = panel.width;
010                  ph = panel.height;
011                  ox = pw/2;
012                  oy = ph/2;
013                  if(panel.getContext){
014                      ctx = panel.getContext('2d');
015                  }else{
016                      alert('Your browser is not support Canvas tag!');
017                  }
018 
019                  ctx.translate(ox, oy);
020             
021                  img = new Image();
022                  img.onload = function(){
023                      setInterval('draw()',1000);
024                  }
025                  img.src = 'bg.jpg';
026              }
027 
028 
029              function drawSecond(){
030                  ctx.save();
031                  ctx.rotate(Math.PI/180*currTime().s*6);
032                  ctx.strokeStyle = "#09f";
033                  ctx.lineWidth = 2;
034                  ctx.lineCap = 'round'
035                  ctx.beginPath();
036                  ctx.moveTo(0,0);
037                  ctx.lineTo(0,-140);
038                  ctx.stroke();
039                  ctx.restore();
040              }
041 
042              function drawMinute(){
043                  ctx.save();
044                  ctx.rotate(Math.PI/180*currTime().m*6);
045                  ctx.strokeStyle = "#f90";
046                  ctx.lineWidth = 6;
047                  ctx.lineCap = 'round'
048                  ctx.beginPath();
049                  ctx.moveTo(0,0);
050                  ctx.lineTo(0,-100);
051                  ctx.stroke();
052                  ctx.restore();
053              }
054 
055              function drawHour(){
056                  ctx.save();
057                  ctx.rotate(Math.PI/180*currTime().h*30+Math.PI/180*currTime().m/
058  2);
059                  ctx.strokeStyle = "#999";
060                  ctx.lineWidth = 10;
061                  ctx.lineCap = 'round'
062                  ctx.beginPath();
063                  ctx.moveTo(0,0);
064                  ctx.lineTo(0,-60);
065                  ctx.stroke();
066                  ctx.restore();
067              }
068              function draw(){
069                  ctx.clearRect(-pw/2,-ph/2,pw,ph);
070                  drawBackground();
071                  drawSecond();
072                  drawMinute();
073                  drawHour();
074                  document.getElementById('time').innerHTML=currTimeStr();
075              }
076 
077              function drawBackground(){
078                      ctx.save();
079                      ctx.translate(0, 0);
080                      ctx.drawImage(img,-250,-250,500,500);
081                      ctx.restore();
082              }
083 
084              function currTimeStr(){
085                  var d = new Date();
086                  var h = d.getHours();
087                  var m = d.getMinutes();
088                  var s = d.getSeconds();
089                  return h+':'+m+':'+s
090              }
091 
092              function currTime(){
093                  var d = new Date();
094                  var h = d.getHours();
095                  var m = d.getMinutes();
096                  var s = d.getSeconds();
097                  if(h>12){
098                      h = h-12;
099                  }
100                  return {"h":h,"m":m,"s":s};
101              }
102          </script>
103      </head>
104      <body onload="init()">
105          <canvas style="border:1px solid #000" id="panel" width="500" height="500
106  ">
107              Your browser is not support Canvas tag!
108          </canvas>
109          <br/>
110          <span id="time"></span>
111      </body>
112  </html>
 
 
============================================================== 
刚才有个哥们说没有表盘背景,现补上: 
\ 


作者 yanglion
点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377670.html
评论
发表评论