欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用HTML5做个时钟

程序员文章站 2022-04-19 18:17:00
心情不好,游戏不想玩,弄个小东西排解一下心中的不畅:  本时钟是通过HTML5的Canvas实现的,相关的技术大家可以到这儿去看看: 链接地址 &n...
心情不好,游戏不想玩,弄个小东西排解一下心中的不畅: 
本时钟是通过HTML5的Canvas实现的,相关的技术大家可以到这儿去看看: 链接地址  
下面就没有什么好所的了,上面的链接中有详细的说明,有图有真相 ~~ 
用HTML5做个时钟 



下面是代码:
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>
 
 
============================================================== 
刚才有个哥们说没有表盘背景,现补上: 
用HTML5做个时钟 


作者 yanglion